常用代码

最新推荐文章于 2023-03-17 08:06:54 发布

kingov

最新推荐文章于 2023-03-17 08:06:54 发布

阅读量326

点赞数

分类专栏： 1.7 Three.js 文章标签： three-js

本文链接：https://blog.csdn.net/kingov/article/details/77888372

版权

1.7 Three.js 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

创建一个基本的threejs应用

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>路径相机</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
            color: #000;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;

            background-color: #fff;
            margin: 0px;
            overflow: hidden;
            }

            #info {
                    color:#000;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;

            }

            a { color: red; }

        </style>
    </head>

    <body>


        <!-- <script src="../js/three.js"></script> -->
        <script src=".././test/three/build/three.js"></script>

        <!-- <script src="../js/controls/PathControls.js"></script> -->

        <script src="../../js/Detector.js"></script>
        <script src="../../js/stats.js"></script>

        <script src="../../js/Tween.js"></script>
        <script src=".././test/js/OrbitControls.js"></script>
        <script>


                function initRenderer(){
                    renderer = new THREE.WebGLRenderer({antialias:true});
                    renderer.setSize( (window.innerWidth) , window.innerHeight );
                    renderer.setClearColor(0xffffff);
                    document.body.appendChild( renderer.domElement );
                }
                function initScene(){
                    scene = new THREE.Scene();
                }
                function initCamera(){
                    camera = new THREE.PerspectiveCamera( 45 , (window.innerWidth)/window.innerHeight , 1.0 , 10000 );
                    camera.position.set( 1200 , 1200 , 1200 );
                    camera.up.set( 0 , 1 , 0 );
                    camera.lookAt({x:0,y:0,z:0});
                }
                function initLight(){
                    light1 = new THREE.AmbientLight( 0xffffff );
                    scene.add( light1 );

                    light2 = new THREE.DirectionalLight( 0x002288 );
                    light2.position.set( 1200, 1200, 1200 );
                    scene.add( light2 );
                }
                function initControl(){
                    orbitControls = new THREE.OrbitControls(camera , renderer.domElement);

                }

                clock = new THREE.Clock();

                function render(){
                    TWEEN.update();
                    var delta = clock.getDelta();
                    orbitControls.update( delta );
                    renderer.clear();
                    renderer.render( scene , camera );
                    requestAnimationFrame( render );
                }

                initRenderer();
                initScene();
                initCamera();
                initLight();
                initControl();





                var pos = { x:1200 , y:1200 , z:1200 };
                var tween = new TWEEN.Tween(pos)
                    .to({
                        x: 800,
                        y: 800,
                        z: 800
                    }, 2000)
                    .easing(TWEEN.Easing.Linear.None)
                    .onUpdate(() => {
                        orbitControls.object.position.set(pos.x, pos.y, pos.z);  //设置相机的位置
                    });

                    var posTar = { x:0 , y:0 , z:0 };
                    var tween1 = new TWEEN.Tween(posTar)
                    .to({
                        x: 300,
                        y: 0,
                        z: 0
                    }, 2000)
                    .easing(TWEEN.Easing.Linear.None)
                    .onUpdate(() => {
                        console.log( posTar )
                        orbitControls.target.set( posTar.x , posTar.y , posTar.z );  //设置相机聚焦
                    });
                // tween.chain(tween1);   //tween动画走完，tween1再走
                tween.start();
                tween1.start();



                    document.onmousedown = function(){
                        // console.log( orbitControls )
                        orbitControls.object.up.set( 1 , 0 , 0 );  //设置相机聚焦
                        // orbitControls.target = new THREE.Vector3( 300 , 0 , 0 );
                        document.onmousemove = function(){

                        }
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null ;
                    }





                function createPlane(){
                    var planeGeo = new THREE.PlaneGeometry( 900 , 600 );
                    var planeMat = new THREE.MeshLambertMaterial({ color:0x83296f , shading: THREE.FlatShading });
                    var plane = new THREE.Mesh( planeGeo , planeMat );
                    scene.add( plane );
                    return plane 
                };
                function createCube(){
                    var cubeGeo = new THREE.CubeGeometry( 50 , 50 , 100 );
                    var cubeMat = new THREE.MeshLambertMaterial({color:0x6856d6});
                    var cube = new THREE.Mesh( cubeGeo , cubeMat );
                    scene.add( cube );
                    return cube ;
                };

                var plane1 = createPlane();
                plane1.rotation.x = -90*Math.PI/180;

                for( var i=0 ; i< 8 ; i++ ){
                    var cube1 = createCube();
                    cube1.translateX( -400 + i*120 );
                }


                render();


        </script>
    </body>
</html>

鼠标拾取

//鼠标控制
            //参考资料: https://stackoverflow.com/questions/11036106/three-js-projector-and-ray-objects/23492823#23492823
var mouse3D = new THREE.Vector3( 
                     ( (event.clientX) / (window.innerWidth) ) * 2 - 1,   //x
                     -( event.clientY / window.innerHeight ) * 2 + 1,  //y
                     0.5 
              ); 
mouse3D.unproject(that.camera);
mouse3D.sub(that.camera.position);
mouse3D.normalize();

var raycaster = new THREE.Raycaster(that.camera.position, mouse3D);
var intersects = raycaster.intersectObjects( that.elements );
if ( intersects.length > 0 ) {
    //如果选中物体，就把本次选中的交给上次选中的
    that.selectItemInfo.oldItem = that.selectItemInfo.nowItem ;

    //如果上次选中的物体存在，那么就把上次选中的物体样式复原
    if(that.selectItemInfo.oldItem){
        that.selectItemInfo.oldItem.material.color = that.selectItemInfo.oldColor ;
        that.selectItemInfo.oldItem.material.transparent = true;
        that.selectItemInfo.oldItem.material.opacity = 0.4; ;
    } ;

    // 把选中的物体的第一个赋值给nowItem
    that.selectItemInfo.nowItem = intersects[0].object
    // 把选中的物体的第一个的样式缓存下来以备下一次复原使用
    that.selectItemInfo.oldColor = intersects[0].object.material.color ;
    // 改变选中物体的样式
    intersects[ 0 ].object.material = new THREE.MeshLambertMaterial({
        color: 'rgb(56,182,255)',
    });
};