three.js - how do I rotate a cylinder around a specific point?

I am assuming that what you mean is that you want an object to rotate around a specific point within it's geometry.

For example, the cylinderGeometry rotates around it's center. Suppose you want it to rotate around its end.

What you need to do is translate the cylinder geometry right after it is created so that the desired point within the geometry is now at the origin.

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

EDIT: You can now do this, instead:

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

Now, when you rotate the cylinder, it will now rotate around its end, rather than its middle.

The end that it is rotating around will also be located at the position you have set for the cylinder mesh.

Obviously, you can do this with any geometry, not just cylinders.


To give a code example for the above answer of 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 );    

Now the rotation works around the cylinder origin:

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

Hope that helps.

Tags:

Three.Js