常用代码

来源：互联网发布：淘宝好评返现处罚条例编辑：程序博客网时间：2024/06/07 11:18

创建一个基本的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#23492823var 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)',    });};

阅读全文

0 0