我有一个THREE.js场景,其中出现了许多元素,我需要检测用户正在单击的对象。
到目前为止,我所做的工作如下。相机不会移动太多-它只会有限地改变垂直位置,总是朝向同一个点。我的近似方法如下:
如果相对于画布单击,我将获取坐标
此方法大致有效,但有时与实际点相差几个像素。
有没有一种更可靠的技术来找出用户点击过的对象?
发布于 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);
}
}
发布于 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
}
}
发布于 2017-01-28 04:40:19
检查鼠标与3d空间中任何立方体的交集,并更改其颜色。也许this能帮到你。
https://stackoverflow.com/questions/7956442
复制相似问题