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

Question

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

• link 1link 2link 3link 4link 5

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

Answer 1

下面的函数可以用来实现这一点。请注意，几何图形被平移，但网格的位置没有改变。

//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
}

Answer 2

我假设你的意思是你希望一个对象围绕一个特定的点旋转在它的几何结构内。

例如，cylinderGeometry 围绕它的中心旋转。假设你想让它围绕它的end旋转。

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

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

编辑：您现在可以这样做：

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

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

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

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

Answer 3

为上面的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;

希望对您有所帮助。