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

Question

我已经提到了以下关于对象旋转的问题。

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

但无法准确理解如何围绕特定点旋转圆柱体？

Answer 1

我假设您的意思是您希望对象围绕其几何中的特定点旋转。

例如，cylinderGeometry围绕它的center旋转。假设您希望它围绕其end旋转。

您需要做的是在圆柱几何体创建后立即平移它，以便几何体中的所需点现在位于原点。

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cylinderHeight/2, 0 ) );

编辑：您现在可以这样做，而不是：

geometry.translate( 0, cylinderHeight/2, 0 ); // three.js r.72

现在，当您旋转圆柱体时，它现在将围绕其末端旋转，而不是围绕其中间旋转。

它旋转的一端也将位于您为圆柱体网格设置的位置。

显然，您可以使用任何几何体来执行此操作，而不仅仅是圆柱体。

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;

希望有帮助。

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
}