1
我正在使用版本的three.js的68。Three.js - 获取鼠标点击的X，Y和Z坐标
我想点击某处并获取X，Y和Z坐标。我按照这里的步骤，但他们给我一个0的Z值：Mouse/Canvas X, Y to Three.js World X, Y, Z
基本上，如果我在场景中有一个网格，我点击它的中间，我希望能够计算与该网格的位置相同的值。 这只是一个例子。我知道我可以使用光线投射，看看我是否碰到了一个网格，然后检查它的位置。但是，即使我没有点击网格，我也想让它工作。
这可能吗？这里是一个jsfiddle：http://jsfiddle.net/j9ydgyL3/
在那个jsfiddle中，如果我能设法点击那个正方形的中心，我希望分别为X，Y和Z值计算10,10,10，因为那些是广场位置的坐标。以下是两个值得关注的功能：
function getMousePosition(clientX, clientY) {
var mouse2D = new THREE.Vector3();
var mouse3D = new THREE.Vector3();
mouse2D.x = (clientX/window.innerWidth) * 2 - 1;
mouse2D.y = -(clientY/window.innerHeight) * 2 + 1;
mouse2D.z = 0.5;
mouse3D = projector.unprojectVector(mouse2D.clone(), camera);
return mouse3D;
//var vector = new THREE.Vector3(
//(clientX/window.innerWidth) * 2 - 1,
//- (clientY/window.innerHeight) * 2 + 1,
//0.5);
//projector.unprojectVector(vector, camera);
//var dir = vector.sub(camera.position).normalize();
//var distance = - camera.position.z/dir.z;
//var pos = camera.position.clone().add(dir.multiplyScalar(distance));
//return pos;
}
function onDocumentMouseUp(event) {
event.preventDefault();
var mouse3D = getMousePosition(event.clientX, event.clientY);
console.log(mouse3D.x + ' ' + mouse3D.y + ' ' + mouse3D.z);
}
我遗留了一些其他代码，我尝试将其注释掉。请注意，这个注释掉的代码在jsfiddle网站中不起作用，可能是因为它们仍然使用three.js版本54。它适用于我的机器与版本68.
编辑：为了澄清，我希望能够得到坐标，无论鼠标在哪里。在这个例子中我只用了一个网格，因为通过查看计算出的坐标是否与网格相同，很容易验证它是否工作。我真的很喜欢它的工作原理，而不使用网格上的光线投射。例如，无论场景中出现什么内容，每次鼠标移动时，都可以始终将计算出的坐标打印到控制台。
你将如何找到Z坐标而没有像网格点击的东西？它可以在任何地方从-Inf到+ Inf。你真的需要那里提供的坐标来测试，并根据你使用raycaster来检查的答案。 – Leeft 2014-10-08 08:34:39
@Leeft我不确定，这就是为什么我问是否有可能。如果真的不可能，那么随意发布它作为答案，我会接受它=） – 2014-10-09 02:14:47