三.JS：获取旋转对象的位置

Question

在 Three.JS 中，我能够围绕其原点旋转对象。例如，如果我要对一条线执行此操作，则该线会旋转，但其顶点的位置不会随着它们的新位置而更新。有没有办法将旋转矩阵应用于顶点的位置以找到点的新位置？假设我将点在 (0,0,0) 和 (0,100,100) 的线在 x 上旋转 45°，在 y 上旋转 20°，在 z 上旋转 100°。我将如何找到顶点相对于 整个 场景的实际位置。

谢谢

Answer 1

是的，“整个场景”是指世界位置。

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

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

yourPoint.applyMatrix4(yourObject.matrixWorld);

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

yourPoint.applyMatrix4(camera.matrixWorld);

在 -1 到 1 中得到一个实际的屏幕位置

yourPoint.applyMatrix4(camera.projectionMatrix);

你会这样理解你的观点

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

另外，您可以将矩阵组合起来，而不是重复执行 3 次。没有对此进行测试，但与此类似。可能会走另一条路：

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

如果你需要一个很好的教程，我推荐this

Alteredq 发布了有关three.js 矩阵的所有信息here

编辑

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

edit2

如果您想在示例中移动线点，而不是将其应用于粒子，请将其应用于

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)