Three.js THREE.Projector 已移至

Question

我知道版本 71 中没有 THREE.projector （请参阅 已弃用列表），但我不明白如何替换它，尤其是在检测单击了哪个对象的代码中：

 var vector = new THREE.Vector3(
  (event.clientX / window.innerWidth) * 2 - 1,
  -(event.clientY / window.innerHeight) * 2 + 1,
  0.5
);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(
  camera.position,
  vector.sub(camera.position).normalize()
);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
  clicked = intersects[0];
  console.log("my clicked object:", clicked);
}

原文由 Martin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现在有一个更简单的模式适用于正交和透视相机类型：

 var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once

...

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

三.js r.84

原文由 WestLangley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

THREE.JS raycaster 文档 实际上提供了这些答案中列出的所有相关信息以及可能难以理解的所有缺失点。

 var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {
  // calculate mouse position in normalized device coordinates
  // (-1 to +1) for both components
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function render() {
  // update the picking ray with the camera and mouse position
  raycaster.setFromCamera( mouse, camera );
  // calculate objects intersecting the picking ray var intersects =
  raycaster.intersectObjects( scene.children );

  for ( var i = 0; i < intersects.length; i++ ) {
    intersects[ i ].object.material.color.set( 0xff0000 );
  }

  renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);`

希望能帮助到你。

原文由 odlh 发布，翻译遵循 CC BY-SA 4.0 许可协议