Question

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

我想点击某处并获取X，Y和Z坐标。我按照这里的步骤进行操作，但它们给我的Z值为0：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。

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

Answer 1

您应该使用THREE.Raycaster。设置intersectObjects列表时，您将能够获得与光线相交的对象数组。因此，您可以从返回列表中的“已点击”对象中获取位置。 Check the updated fiddle here。我还将你的Three.js改为版本R68

要更高级地使用THREE.RayCaster，请查看Threejs.org/examples上的示例，例如this example with interactive cubes。

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

1 个答案: