three.js - 如何围绕特定点旋转圆柱体？

Question

我参考了以下问题来进行对象旋转。

• 链接 1 链接 2 链接 3 链接 4 链接 5

但我还是无法确切地理解如何围绕特定点旋转圆柱体？

- Valay

Answer 1

我假设你的意思是希望一个物体围绕它几何形状内的一个特定点旋转。

比如，cylinderGeometry 围绕它的“中心”旋转。如果你希望它围绕它的“端点”旋转，则需要在创建完圆柱几何体后将其平移，使得几何体内的所需点现在位于原点。

geometry.translate( 0, cylinderHeight/2, 0 );

现在，当你旋转这个圆柱体时，它将绕着它的末端旋转，而不是中间部分。

它绕着旋转的末端也会位于您设置的圆柱体网格的位置。

显然，您可以对任何几何图形执行此操作，而不仅仅是圆柱体。

three.js r.147

- WestLangley

---

谢谢，它有效。但是在管道几何中，如何将轴助手放置在管道的边缘或换句话说，在每个段点处放置轴助手，以便用户可以旋转或旋转管道？请查看我在[链接]（http://stackoverflow.com/questions/12776933/three-js-rotate-tube-geometry-from-segment-point-and-show-different-values）上的另一个问题-@WestLangley - Valay

你能帮忙旋转管道几何体吗？我想旋转管道几何体的特定部分。当我旋转时，整个管道都会被旋转。 - Valay

是的，但该网站不接受我提出的任何新问题。-@WestLangley - Valay

我之前在这里发布过一个问题。旋转几何的一部分 - Valay

如果您想每帧都这样做怎么办？在这种情况下，将几何体翻译成其他语言是没有意义的。https://threejs.org/docs/#api/core/Geometry? - Aaron Krajeski

@mysteryDate 对几何体本身应用变换通常只需要执行一次。如果要每帧旋转网格，应该更新网格的“rotation”或“quaternion”属性。 - WestLangley

Answer 2

为了举一个关于WestLangley的回答的代码示例：

// CYLINDER
var cyl_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cyl_width = 1;
var cyl_height = 5;
// THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight, openEnded )
var cylGeometry = new THREE.CylinderGeometry(cyl_width, cyl_width, cyl_height, 20, 1, false);
// translate the cylinder geometry so that the desired point within the geometry is now at the origin
cylGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cyl_height/2, 0 ) );
var cylinder = new THREE.Mesh(cylGeometry, cyl_material);

scene.add( cylinder );    

现在，旋转围绕圆柱体原点进行：

cylinder.rotation.x = 0.5*Math.PI;

希望这有所帮助。

- Avatar

---

谢谢 - 你帮了我很多！ - bernhardrusch

Answer 3

下面的函数可用于实现此操作。请注意，几何体已被翻译，但网格的位置不会改变。

//rotates a mesh's geometry about a specified axis and pivot
//the axis is a normalized Vector3
const rotateAbout = (mesh, axis, axisPosition, angle) => {
    mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(mesh.position.x-axisPosition.x, mesh.position.y-axisPosition.y, mesh.position.z-axisPosition.z));  //translate geometry to axis location
    mesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationAxis(axis, angle));    //rotate geometry about axis
    mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(axisPosition.x-mesh.position.x, axisPosition.y-mesh.position.y, axisPosition.z-mesh.position.z));  //translate geometry back to original location
}

- badasstechie