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

Question

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

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

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

Answer 1

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

例如,cylinderGeometry围绕它的中心旋转.假设您希望它围绕其末端旋转.

您需要做的是在创建圆柱体几何体之后立即进行平移,以便几何体内的所需点现在位于原点.

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;

希望有所帮助.