CODEWITHSUNDEEP
javascriptthree.js
Dan D.
Dan D.

Reputation: 32391

Rotation anchor point in Three.js

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;

Upvotes: 4

Views: 10078

Answers (1)

WestLangley
WestLangley

Reputation: 104843

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

Upvotes: 14

Related Questions