三.JS:获取旋转对象的位置 [英] Three.JS: Get position of rotated object

问题描述

在 Three.JS 中，我能够围绕其原点旋转对象.例如，如果我用一条线来做这件事，这条线会旋转，但它的顶点的位置不会用它们的新位置更新.有没有办法将旋转矩阵应用于顶点的位置以找到点的新位置?假设我将带有 (0,0,0) 和 (0,100,100) 点的线在 x 上旋转 45°，在 y 上旋转 20°，在 z 上旋转 100°.我将如何找到顶点相对于整个场景的实际位置.

In Three.JS, I am capable of rotating an object about its origin. If I were to do this with a line, for instance, the line rotates, but the positions of its vertices are not updated with their new locations. Is there some way to apply the rotation matrix to the position of the vertices to find the new position of the point? Say I rotate a line with points at (0,0,0) and (0,100,100) by 45° on the x, 20° on the y, and 100° on the z. How would I go about finding the actual position of the vertices with respect to the entire scene.

谢谢

推荐答案

是的，整个场景"意味着世界位置.

yes, 'entire scene' means world position.

THREE.Vector3() 有一个 applyMatrix4() 方法，

THREE.Vector3() has a applyMatrix4() method,

您可以执行与着色器相同的操作，以便将顶点投影到世界空间中

you can do the same things that the shader does so in order to project a vertex into world space you would do this

yourPoint.applyMatrix4(yourObject.matrixWorld);

要将其投影到相机空间中，您可以在接下来应用此

to project that into camera space you can apply this next

yourPoint.applyMatrix4(camera.matrixWorld);

以 -1 到 1 获得实际屏幕位置

to get an actual screen position in -1 to 1

yourPoint.applyMatrix4(camera.projectionMatrix);

你会像这样访问你的观点

you would access your point like this

var yourPoint = yourObject.geometry.vertices[0]; //first vertex

此外，您可以将矩阵组合起来，而不是这样做三次.没有对此进行测试，但与此类似.可能会走另一条路:

also, rather than doing this three times, you can just combine the matrices. Didnt test this, but something along the lines of this. Might go the other way:

var neededPVMmatrix = new THREE.Matrix4().multiplyMatrices(yourObject.matrixWorld, camera.matrixWorld);
neededPVMmatrix.multiplyMatrices(neededPVMmatrix, camera.projectionMatrix);

如果你需要一个很好的教程来了解它的作用，我推荐 这个

if you need a good tutorial on what this does under the hood i recommend this

Alteredq 在这里

编辑

需要注意的一点是，如果您只需要旋转，而不是平移，则需要使用模型世界矩阵的上部 3x3 部分，即旋转矩阵.这可能稍微复杂一些.我忘记了 Three.js 给你的东西，但我认为 normalMatrix 可以解决问题，或者你可以将你的 THREE.Vector3() 转换为 THREE.Vector4()，并将 .w 设置为 0，这将阻止任何转换正在申请.

One thing to note though, if you want just the rotation, not the translation, you need to use the upper 3x3 portion which is the rotation matrix, of the models world matrix. This might be slightly more complicated. I forgot what three.js gives you, but i think the normalMatrix would do the trick, or perhaps you can convert your THREE.Vector3() to THREE.Vector4(), and set .w to 0, this will prevent any translation from being applied.

edit2

如果你想在你的例子中移动线点，而不是把它应用到粒子上，把它应用到

if you want to move the line point in your example, instead of applying it to the particle, apply it to

var yourVertexWorldPosition = new THREE.Vector3().clone(geo.vertices[1]); //this is your second line point, to whatever you set it in your init function
yourVertexWorldPosition.applyMatrix4();//this transforms the new vector into world space based on the matrix you provide (line.matrixWorld)

这篇关于三.JS:获取旋转对象的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！