Translating rotation origin in Three.js

Question

I created a 3D object which comprises several individual shapes, I now would like it to be rotated around its center instead of an angle

This function I'm using to rotate it

document.body.onmousemove = function(e){

vargram.rotation.x = 90;
vargram.rotation.z = e.pageX / 100;

}

while this is how I obtained the individual meshes

var triangleShape = new THREE.Shape();
triangleShape.moveTo(b, 0);
triangleShape.lineTo(lato, 0);
triangleShape.lineTo(lato, a);
var extrudedGeometry = new THREE.ExtrudeGeometry(triangleShape, {amount: 0.3, bevelEnabled: false});
var extrudedMesh = new THREE.Mesh(extrudedGeometry, material1);

Can I set the coordinates for the rotation axis? Or should I change the coordinates of the shapes?

http://jsfiddle.net/fillotassi/hk93fmrd/2/

WestLangley WestLangley · Accepted Answer · 2016-04-10T15:24:04

If you want to translate the rotation origin of a mesh, one solution is to translate the geometry itself as soon as the geometry is created:

geometry.translate( a, b, c );

In your case, you have a parent object, and multiple child meshes. So apply the same translation to the geometry of each child mesh.

three.js r.75

Translating rotation origin in Three.js

1 Answers