12

I've referred following questions for object rotation.

But could not understand exactly how do I rotate a cylinder around a specific point ?

Community
  • 1
  • 1
Valay
  • 1,991
  • 2
  • 43
  • 98

3 Answers3

20

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.translate( 0, cylinderHeight/2, 0 );

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.

three.js r.147

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 1
    Thanks, it works. but in case of tube geometry how do I put axis helper at the edge of tube or in other words axis helper at each segment point so that user can rotate or spin the tube ? Please have a look at my another question on [link](http://stackoverflow.com/questions/12776933/three-js-rotate-tube-geometry-from-segment-point-and-show-different-values)- @WestLangley – Valay Oct 08 '12 at 08:30
  • Can you help to spin tube geometry in such a way ? I want to spin particular portion of tube geometry. When I rotate, the whole tube is rotated. – Valay Oct 22 '12 at 12:58
  • Yes but the site does not accept any new question from my side.-@WestLangley – Valay Oct 22 '12 at 14:16
  • I've posted a question on this before. [rotate part of geometry](http://stackoverflow.com/questions/12969119/three-js-rotate-particular-part-of-geometry) – Valay Oct 22 '12 at 14:23
  • What if you want to do it every frame? It doesn't make sense to translate the geometry in this instance. https://threejs.org/docs/#api/core/Geometry? – Aaron Krajeski Oct 17 '17 at 20:52
  • @mysteryDate Application of a transformation to the geometry itself is something you would typically do only once. To rotate a mesh each frame, update the `rotation` or `quaternion` property of the mesh, instead. – WestLangley Oct 17 '17 at 21:28
7

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.

Avatar
  • 14,622
  • 9
  • 119
  • 198
1

The function below may be used to achieve this. Please note that the geometry is translated, but the position of the mesh does not change.

//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
  • 31
  • 4