Three.js-获取鼠标单击的X，Y和Z坐标 [英] Three.js - Getting the X, Y, and Z coordinates of mouse click

问题描述

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

I'm using version 68 of three.js.

我想单击某处并获取X，Y和Z坐标.我按照此处的步骤进行操作，但它们给我的Z值为0:鼠标/画布X，Y到Three.js世界X，Y，Z

I would like to click somewhere and get the X, Y, and Z coordinates. I followed the steps here, but they give me a Z value of 0: Mouse / Canvas X, Y to Three.js World X, Y, Z

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

Basically, if I have a mesh in the scene, and I click in the middle of it, I'm hoping to be able to calculate the same values as the position of that mesh. This is just an example. I know I could use raycasting and see if I collided with a mesh and then just check its position. However, I want this to work even if I didn't click a mesh.

这可能吗?这是一个jsfiddle: http://jsfiddle.net/j9ydgyL3/

Is this possible? Here is a jsfiddle: http://jsfiddle.net/j9ydgyL3/

在那个jsfiddle中，如果我可以设法单击该正方形的中心，我希望分别计算X，Y和Z值的10、10、10，因为那是正方形位置的坐标.这是需要关注的两个功能:

In that jsfiddle, if I could manage to click in the center of that square, I'm hoping to calculate 10, 10, 10 for the X, Y, and Z values respectively because those are the coordinates of the square's position. Here are the two functions of concern:

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的计算机上，它可以正常工作.

I left some of the other code I tried commented out. Please note that this commented-out code didn't work in the jsfiddle website, maybe because they're still using version 54 of three.js. It works fine on my machine with version 68.

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

To clarify, I would like to be able to get the coordinates no matter where the mouse is. I just used a mesh in this example because it's easy to verify if it works by seeing if the calculated coordinates are the same as the mesh's. What I would really like is for it to work without using raycasting on a mesh. For example, we could have it always printing the calculated coordinates to the console every time the mouse moves, no matter what is in the scene.

推荐答案

您应该使用 THREE.Raycaster .设置intersectObjects的列表时，将能够获得与射线相交的对象数组.因此，您可以从返回列表的单击"对象中获取位置. 在此处检查更新的小提琴. 我还将您的Three.js更改为R68版本

You should use a THREE.Raycaster for this. When you set a list of intersectObjects you will be able to get an array of objects that intersected with the ray. So you can get the position from the 'clicked' object from returned list. Check the updated fiddle here. I also changed your Three.js to version R68

要更高级地使用THREE.RayCaster，请在 Threejs.org/examples 中查看示例，例如带有交互式多维数据集的示例.

For more advanced use of THREE.RayCaster check the examples at Threejs.org/examples like this example with interactive cubes.

这篇关于Three.js-获取鼠标单击的X，Y和Z坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！