Javascript 3.js 3.投影仪已移动到

我知道第71版中没有

3个。投影仪
（参见），但我不知道如何替换它，特别是在检测单击了哪个对象的代码中：

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);
}


现在有一种更简单的模式可用于正交和透视摄影机类型：

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 );

three.js r.84
您可以使用如上所述的最新推荐版本

要使特定代码正常工作，请替换：

projector.unprojectVector( vector, camera );

与

我注意到，我认为前面提到的所有这些在完整的窗口中都可以，但是如果页面上除了画布之外还有其他内容，则需要获取click events目标的偏移量并将其删除

e=事件，mVec是一个三矢量2

    let et = e.target, de = renderer.domElement;
    let trueX = (e.pageX - et.offsetLeft);
    let trueY = (e.pageY - et.offsetTop);
    mVec.x = (((trueX / de.width) * 2) - 1);
    mVec.y = (((trueY / de.height) * -2) + 1);
    wup.raycaster.setFromCamera( mVec, camera );
    [Then check for intersections, etc.]

看起来您也需要注意拖动（鼠标移动），或者在使用window.addEventListener（'click'，function（e）{
}）时释放拖动会触发不必要的单击

[你会注意到我把负号放在了更符合逻辑的地方。]
实际上给出了这些答案中列出的所有相关信息，以及所有可能难以理解的缺失点

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);`

var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
mouseMove函数（事件）{
//在标准化设备坐标中计算鼠标位置
//两个组件的-1到+1
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
} 
函数render（）{
//使用相机和鼠标位置更新拾取光线
raycaster.setFromCamera（鼠标、相机）；
//计算与拾取光线相交的对象var intersects=
raycaster.intersectObjects（scene.children）；
对于（var i=0；i

希望有帮助。
你能给我们一个完整的例子吗？什么是物体？什么是递归标志？什么是？如果你重复先前的答案，你可以投它一票吗？哦哦，上帝，谢谢你！非常感谢。因为我的偏移量，我确信我的光线投射不正常！我的大脑找不到一种方法来获得好的价值观！对于其他人：是的，我们的画布可能不是全屏BRRRR
    let et = e.target, de = renderer.domElement;
    let trueX = (e.pageX - et.offsetLeft);
    let trueY = (e.pageY - et.offsetTop);
    mVec.x = (((trueX / de.width) * 2) - 1);
    mVec.y = (((trueY / de.height) * -2) + 1);
    wup.raycaster.setFromCamera( mVec, camera );
    [Then check for intersections, etc.]

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);`