三.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
这篇关于三.js 正交相机对象拾取的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!