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对象的文档,看看这些方法的说明。

IT文库 » threejs对象拾取
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址