three.js正交相机对象选取 [英] three.js orthographic camera object picking

问题描述

我正在尝试在使用正交摄影机的场景中拾取对象. 我的代码片段已经可以使用，但是并不精确. 我已经在stackoverflow上找到了一些答案，但已经过时或不再使用. 这是我的代码onMouseDown

i am trying to pick objects in a scene where i use an orthographic camera. my code fragment already works, but it is not precise. i already found some answers on stackoverflow, but those are deprecated or won't work anymore at all. here is my code 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/

如果在立方体的左/右/上方/下方单击一些像素，它仍会告诉我该物体已被触摸.

if you click some pixels away left/right/above/below the cube, it still tells me that the object was touched.

我正在使用three.js r69.

i am using three.js r69.

任何提示将不胜感激. 谢谢，加油！

any hints would be very much appreciated. thanks, cheers!

推荐答案

以下是使用正交摄影机或透视摄影机进行光线投射(拾取)时要使用的模式:

Here is the pattern to use when raycasting (picking) with either an orthographic camera or a perspective camera:

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

three.js r.84

这篇关于three.js正交相机对象选取的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！