three.js入门5——2014.5.28高亮显示

来源：互联网发布：承兑汇票知乎编辑：程序博客网时间：2024/05/19 19:32

已经可以通过改变摄像机来旋转场景了，现在我想尝试下鼠标经过的高亮显示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <!--引入Three.js-->        <script src="../build/three.min.js"></script>        <script type="text/javascript">            //开启Three.js渲染器            var renderer; //声明全局变量（对象）            var projector, mouse = { x: 0, y: 0 }, INTERSECTED;            function initThree() {                width = document.getElementById('canvas3d').clientWidth; //获取画布「canvas3d」的宽                height = document.getElementById('canvas3d').clientHeight; //获取画布「canvas3d」的高                renderer = new THREE.WebGLRenderer({ antialias: true }); //生成渲染器对象（属性：抗锯齿效果为设置有效）                renderer.setSize(width, height); //指定渲染器的高宽（和画布框大小一致）                document.getElementById('canvas3d').appendChild(renderer.domElement); //追加 【canvas】 元素到 【canvas3d】 元素中。                renderer.setClearColorHex(0xFFFFFF, 1.0); //设置canvas背景色(clearColor)            }            //设置相机            var camera;            function initCamera() {                camera = new THREE.PerspectiveCamera(45, width / height, 1, 5000); //设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）                camera.position.x = 0; //设置相机的位置坐标                camera.position.y = 50; //设置相机的位置坐标                camera.position.z = 100; //设置相机的位置坐标                camera.up.x = 0; //设置相机的上为「x」轴方向                camera.up.y = 1; //设置相机的上为「y」轴方向                camera.up.z = 0; //设置相机的上为「z」轴方向                camera.lookAt({ x: 0, y: 0, z: 0 }); //设置视野的中心坐标            }            //设置场景            var scene;            function initScene() {                scene = new THREE.Scene();            }            //设置光源            var light;            function initLight() {                light = new THREE.DirectionalLight(0xffffff, 1.0, 0); //设置平行光源                light.position.set(200, 200, 200); //设置光源向量                scene.add(light); // 追加光源到场景            }            //设置物体            var cube;            function initObject() {                               var cubeGeometry = new THREE.CubeGeometry(20, 20, 20);                var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x000088 });                cube = new THREE.Mesh(cubeGeometry, cubeMaterial);                cube.position.set(0, 0, 0);                scene.add(cube);                projector = new THREE.Projector();                document.addEventListener('mousemove', onDocumentMouseMove, false);                          }            function onDocumentMouseMove(event) {                              mouse.x = (event.clientX / window.innerWidth) * 2 - 1;                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;                           }            function update() {                var vector = new THREE.Vector3(mouse.x, mouse.y, 1);                projector.unprojectVector(vector, camera);                var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());                                var intersects = ray.intersectObjects(scene.children);                                if (intersects.length > 0) {                                       if (intersects[0].object != INTERSECTED) {                                               if (INTERSECTED)                            INTERSECTED.material.color.setHex(INTERSECTED.currentHex);                                               INTERSECTED = intersects[0].object;                                               INTERSECTED.currentHex = INTERSECTED.material.color.getHex();                                              INTERSECTED.material.color.setHex(0xffff00);                    }                }                else                 {                    if (INTERSECTED)                        INTERSECTED.material.color.setHex(INTERSECTED.currentHex);                    INTERSECTED = null;                }            }            //执行            animate();            function threeStart() {                initThree();                initCamera();                initScene();                initLight();                initObject();                renderer.clear();                renderer.render(scene, camera);            }            function animate() {                                requestAnimationFrame(animate);                cube.rotation.y += 0.01;                renderer.render(scene, camera);                update();            }        </script>        <style type="text/css">            div#canvas3d{                  border: none;                  cursor: move;                  width: 1400px;                  height: 600px;                  background-color: #EEEEEE;                }        </style>    </head>    <body onload='threeStart();'>        <!--盛放canvas的容器-->        <div id="canvas3d"></div>    </body></html>

其实关键代码仅仅是onDocumentMouseMove(event)以及update();

通过onDocumentMouseMove获取鼠标坐标，这里详细说一下update()函数，首先将用vector将鼠标坐标转换为3维坐标，再通过projector.unprojectVector将坐标转变到场景中，然后通过相机和点坐标来确定一条射线ray，用intersects来存入射线ray接触到的每一个scene的子节点，最后取出intersects的第一个子节点，也就是最接近相机的节点，将它的颜色进行改变。

0 0