Three.js - 获取鼠标点击事件的 X、Y 和 Z 坐标

Question

我正在使用 three.js 的 版本68。

我想要在某处点击并获取X、Y和Z坐标。我按照这里的步骤，但它们给我的Z值为0：Mouse / Canvas X, Y to Three.js World X, Y, Z 基本上，如果场景中有一个网格，并且我在其中央点击，我希望能够计算出与该网格位置相同的值。这只是一个例子。我知道我可以使用射线投射并查看是否与网格发生碰撞，然后只需检查其位置即可。但是，即使我没有单击网格，我也希望它能正常工作。

这可能吗？这是一个 jsfiddle： http://jsfiddle.net/j9ydgyL3/ 在那个 jsfiddle 中，如果我设法在那个正方形的中心点击，我希望能够计算出分别为10、10、10的X、Y和Z值，因为这些是正方形位置的坐标。以下是两个相关函数：

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版本时它可以正常工作。

编辑：澄清一下，我希望能够获取无论鼠标在哪里的坐标。我只是在这个例子中使用了一个网格，因为通过查看计算出来的坐标是否与网格的坐标相同，很容易验证其是否有效。我真正想要的是不使用对网格进行光线投射的方法使其工作。例如，每当鼠标移动时，我们都可以将计算出来的坐标始终打印到控制台中，无论场景中有什么。

- Programmer_D

---

你如何在没有像网格一样的东西可供点击时找到Z坐标？它可能在-无穷大到+无穷大之间的任何地方。你真的需要在其中提供坐标进行测试，正如答案所述，你可以使用射线投射器来检查它。 - Leeft

@Leeft 我不确定，所以我问一下是否可能。如果真的不可能，那么请随意将其发布为答案，我会接受它 =) - Programmer_D

Answer 1

你需要使用THREE.Raycaster。当你设置intersectObjects列表时，你可以获得与射线相交的对象数组。所以你可以从返回的列表中获取'clicked'对象的位置。在这里检查更新后的fiddle。 我还将你的Three.js更改为版本R68。

更高级的THREE.RayCaster用法，请查看Threejs.org/examples上的示例，如这个带有交互式立方体的示例。

来自更新后的fiddle的相关代码：

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);

var vector = new THREE.Vector3( mouse3D.x, mouse3D.y, 1 );    
    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = raycaster.intersectObjects(scene.children );
    if(intersects.length > 0){
        console.log(intersects[0].object.position);
    }
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}

- Wilt

---

弦乐器似乎无法正常工作，因为方块几何函数似乎出现了错误？ - Joseph Astrahan