js:获取旋转对象的位置

Three.JS: Get position of rotated object

本文关键字:位置 对象 旋转 获取 js      更新时间:2023-09-26

在Three.JS中,我能够围绕其原点旋转对象。例如,如果我对一条线这样做,这条线会旋转,但它的顶点位置不会更新为它们的新位置。是否有某种方法可以将旋转矩阵应用于顶点的位置以找到点的新位置?假设我将点为(0,0,0)和(0,100,100)的直线在x轴上旋转45°,在y轴上旋转20°,在z轴上旋转100°。我该如何找到这些顶点相对于整个场景的实际位置?

谢谢

是的,'整个场景'是指世界位置。

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

也不需要做三次,你可以把矩阵组合起来。没有测试这个,但沿着这条线的东西。也可以用另一种方式:

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

如果你需要一个很好的教程来了解它的底层功能,我推荐这个

Alteredq张贴了关于三个。js矩阵的所有信息

编辑

有一点需要注意,如果你只想要旋转,而不是平移,你需要使用上面的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)