threejs对象拾取

对象拾取

对象拾取也就是要获得鼠标事件发生位置的图形对象。在threejs中，是通过Raycaster 对象来拾取对象的，ray是射线，caster是投射器，从字面上即可理解其工作原理是：从某个方向发射一条射线，穿过鼠标所在的点，则这条射线经过的对象就是鼠标点击的对象。示例如下：

let raycaster = new THREE.Raycaster();let mouse = new THREE.Vector2();function pickupObjects(e){         //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标          mouse.x = (e.clientX/window.innerWidth)*2 -1;          mouse.y = -(e.clientY/window.innerHeight)*2 + 1;          //从相机发射一条射线，经过鼠标点击位置          raycaster.setFromCamera(mouse,camera);          //计算射线相机到的对象，可能有多个对象，因此返回的是一个数组，按离相机远近排列          let intersects = raycaster.intersectObjects(scene.children);          for ( var i = 0; i < intersects.length; i++ ) {              intersects[ i ].object.material.color.set( 0x00ff00 );          }}

下面分析一下例子的代码，先看看鼠标点击位置的坐标转换：

mouse.x = (e.clientX/window.innerWidth)*2 -1;mouse.y = -(e.clientY/window.innerHeight)*2 + 1;

为什么这样就能得到threejs的标准坐标？下面是我写的一个推导过程：

把上面的x1换成e.clientX，把y1换成e.clientY，就可以得到例子中的式子了。所以，当threejs的屏幕宽度并不是window.innerWidth时，也要记得根据实际从新推导。

其它并不复杂，可以参考一下Raycaster对象的文档，看看这些方法的说明。