在THREE.js中检测单击的对象
在THREE.js中检测单击的对象
提问于 2011-11-01 00:16:08
我有一个THREE.js场景，其中出现了许多元素，我需要检测用户正在单击的对象。
到目前为止，我所做的工作如下。相机不会移动太多-它只会有限地改变垂直位置，总是朝向同一个点。我的近似方法如下：
如果相对于画布单击，我将获取坐标
- I通过简单的重新缩放将它们转换为webGL场景中的水平和垂直坐标，并添加足够远的Z坐标。
- I从上面的点开始拍摄水平射线，由THREE.Ray()
- I使用ray.intersectObjects()查找沿着射线的第一个元素。
此方法大致有效，但有时与实际点相差几个像素。
有没有一种更可靠的技术来找出用户点击过的对象？
回答 4
Stack Overflow用户
发布于 2014-01-17 23:27:06
取决于你使用的是哪种相机。
1) Mr.doob提供的PerspectiveCamera：是ok链接。
2) OrthographicCamera：有很大不同：
var init = function() {
camera = new THREE.OrthographicCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, NEAR, FAR);
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
}
function onDocumentMouseDown( e ) {
e.preventDefault();
var mouseVector = new THREE.Vector3();
mouseVector.x = 2 * (e.clientX / SCREEN_WIDTH) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / SCREEN_HEIGHT );
var raycaster = projector.pickingRay( mouseVector.clone(), camera );
var intersects = raycaster.intersectObject( TARGET );
for( var i = 0; i < intersects.length; i++ ) {
var intersection = intersects[ i ],
obj = intersection.object;
console.log("Intersected object", obj);
}
}Stack Overflow用户
发布于 2014-08-18 15:09:55
看看这个：
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
var object; //your object
document.addEventListener('mousedown', onMouseDown, false);
function onMouseDown(e) {
var vectorMouse = new THREE.Vector3( //vector from camera to mouse
-(window.innerWidth/2-e.clientX)*2/window.innerWidth,
(window.innerHeight/2-e.clientY)*2/window.innerHeight,
-1/Math.tan(22.5*Math.PI/180)); //22.5 is half of camera frustum angle 45 degree
vectorMouse.applyQuaternion(camera.quaternion);
vectorMouse.normalize();
var vectorObject = new THREE.Vector3(); //vector from camera to object
vectorObject.set(object.x - camera.position.x,
object.y - camera.position.y,
object.z - camera.position.z);
vectorObject.normalize();
if (vectorMouse.angleTo(vectorObject)*180/Math.PI < 1) {
//mouse's position is near object's position
}
}Stack Overflow用户
发布于 2017-01-28 04:40:19
检查鼠标与3d空间中任何立方体的交集，并更改其颜色。也许this能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7956442
复制相关文章
相似问题