检测THREE.js中的点击对象

Question

我有一个THREE.js场景,其中出现了很多元素,我需要检测用户点击的对象.

到目前为止我所做的是以下内容.相机不会移动太多 - 它只会将垂直位置改变一个有限的数量,始终朝向同一点.我的近似方法如下:

• 如果相对于画布的点击,我会获取坐标
• 我通过简单的重新缩放将它们转换为webGL场景中的水平和垂直坐标,并添加一个足够远的Z坐标.
• 我从上面的点开始采用水平射线,由THREE.Ray()构建
• 我使用ray.intersectObjects()来查找沿光线的第一个元素.

这种方法大致有效,但有时距离实际点几个像素.

是否有更可靠的技术来找出用户点击的对象？

Answer 1

取决于你使用什么样的相机.

1)PerspectiveCamera:是Mr.doob提供的正确链接.
2)OrthographicCamera:完全不同:

var init = function() {
  camera = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, NEAR, FAR);
  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}

function onDocumentMouseDown( e ) {
  e.preventDefault();
  var mouseVector = new THREE.Vector3();
  mouseVector.x = 2 * (e.clientX / SCREEN_WIDTH) - 1;
  mouseVector.y = 1 - 2 * ( e.clientY / SCREEN_HEIGHT );
  var raycaster = projector.pickingRay( mouseVector.clone(), camera );
  var intersects = raycaster.intersectObject( TARGET );
  for( var i = 0; i < intersects.length; i++ ) {
    var intersection = intersects[ i ],
    obj = intersection.object;
    console.log("Intersected object", obj);
  }
}