three.js 正交相机对象拾取

Posted 2023-02-27

【中文标题】three.js 正交相机对象拾取

【英文标题】：three.js orthographic camera object picking

【发布时间】：2014-12-26 11:42:17

【问题描述】：

我正在尝试在使用正交相机的场景中挑选对象。 我的代码片段已经可以工作，但并不精确。 我已经在 *** 上找到了一些答案，但这些答案已被弃用或根本不再适用。 这是我的代码 onMouseDown

function onDocumentMouseUp( event ) 
    event.preventDefault();

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

    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
    var pos = camera.position;
    var ray = new THREE.Raycaster(pos, vector.unproject(camera).sub(camera.position).normalize());

    var intersects = ray.intersectObjects(objects);

    if (intersects.length > 0) 
        console.log("touched:" + intersects[0]);
    
    else 
        console.log("not touched");
    

请看http://jsfiddle.net/ujzpe07t/1/

如果您单击立方体左/右/上方/下方的一些像素，它仍会告诉我对象已被触摸。

我正在使用three.js r69。

任何提示将不胜感激。 谢谢，干杯！

【参考方案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 );

three.js r.84

【讨论】：

@WestLangley 我也在与正射相机和相交作战。但是您的other answer 不同。为什么会这样，我错过了什么吗？有关于这方面的一些官方 ThreeJS 文档吗？

@Wilt 更新了另一个答案。谢谢。请参阅three.js 示例。