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