4

I am defining a cone that I need to be able to rotate around its top point (the point where the cone thickness is the smallest one). I couldn't find yet the way to set the point around which the rotation to happen.

var coneGeometry = new THREE.CylinderGeometry(1000, 0, width, 50, 50, false);
var cone = new THREE.Mesh(coneGeometry, material);
cone.position.x = x;
cone.position.y = y + width / 2;
cone.position.z = z;
// I want this rotation to happen around the point given by the (x, y, z) location
cone.rotation.x = dip;
Dan D.
  • 32,246
  • 5
  • 63
  • 79

1 Answers1

13

The cone geometry is centered at the origin. What you need to do is translate the cone geometry right after it is created so the tip of the cone is at the origin.

coneGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, coneHeight/2, 0 ) );

(The sign of the translation changes depending on which end of the cone is the small end.)

Now, when you rotate the cone, it will rotate around the tip. The tip will also be located at the position you set.

EDIT: You can now do this, instead:

coneGeometry.translate( 0, coneHeight/2, 0 ); // three.js r.72
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 2
    This doesn't work for me. It translates the pivot point alone with the geometry. – Tyguy7 Sep 14 '15 at 04:13
  • 1
    It turns out I had an old version of ThreeJS and didn't realize it. – Tyguy7 Jan 06 '16 at 22:32
  • 1
    Just for anyone trying to do this now, translate has been replaced with translateOnAxis() or you can use translateX(), translateY(), or translateZ(). I ended up using conegeometry.translateY(-coneHeight/2); – Joe Jankowiak May 31 '19 at 22:45
  • 1
    @JoeJankowiak Not true. Do not confuse `Object3D` methods with `Geometry` methods. – WestLangley May 31 '19 at 23:21
  • 1
    You're right, I retract my statement. I guess I tried to apply the translation on the Object and not the geometry which is why I got a warning. – Joe Jankowiak Jun 01 '19 at 06:21