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

我在用着版本68三个.js。

我想单击某处并获取 X、Y 和 Z 坐标。我按照此处的步骤操作，但它们给我的 Z 值为 0：鼠标/画布 X、Y 到 Three.js 世界 X、Y、Z https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z

基本上，如果我在场景中有一个网格，然后单击它的中间，我希望能够计算出与该网格的位置相同的值。这只是一个例子。我知道我可以使用光线投射来查看是否与网格体发生碰撞，然后检查其位置。但是，即使我没有单击网格，我也希望它能够工作。

这可能吗？这是一个jsfiddle：http://jsfiddle.net/j9ydgyL3/ 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 版本机器上运行良好。

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

你应该使用THREE.Raycaster https://threejs.org/docs/#api/core/Raycaster为了这。当您设置一个列表时intersectObjects您将能够获得与射线相交的对象数组。因此，您可以从返回的列表中的“单击”对象中获取位置。在这里检查更新的小提琴 http://jsfiddle.net/j9ydgyL3/2/。 我还把你的Three.js改成了R68版本

为了更高级地使用THREE.RayCaster检查示例Threejs.org/examples http://threejs.org/examples/ like 这个带有交互式立方体的示例 http://threejs.org/examples/#webgl_interactive_cubes.

相关代码来自更新了小提琴 http://jsfiddle.net/j9ydgyL3/2/:

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