Three.js - Can I 'apply' position, rotation, and scale to the geometry?

Question

I'd like to edit an object's position, rotation, and scale vectors, then 'apply' them to the geometry, which would zero-out those vectors, but retain the transformation.

For example, let's say I import a cube with a side-length of 1. The min and max vertices of the cube are located at (0, 0, 0) and (1, 1, 1). I set the object's scale to (2, 2, 2) and then apply the transformation to the geometry.

After applying, the scale is reset to (1, 1, 1) and the min and max vertices of the cube are (0, 0, 0) and (2, 2, 2), respectively.

Is there some built-in way to do this?

Mythos

Answer 1

You can apply an object's transform to the object's geometry directly, and then reset the position, rotation, and scale like so:

object.updateMatrix();

object.geometry.applyMatrix4( object.matrix );

object.position.set( 0, 0, 0 );
object.rotation.set( 0, 0, 0 );
object.scale.set( 1, 1, 1 );
object.updateMatrix();

three.js r.150

Kape

How do I do it for a THREE.Group() which can in turn contain THREE.Group()? – Swats

@AmriteshAnand You will need to make a new post and show your code if you have a question. – Kape

Is this still correct for modern three.js? When I try do this on a Mesh instance, it just resets everything back to way it was before I rotated anything. I should note that I substituted applyMatrix with applyMatrix4 as applyMatrix no longer seems to exist – Saki

Answer 2

Another solution is to create a wrapper object, where the child object will have the default rotation, position and scale:

const ChildObject = load(/*...*/);
ChildObject.rotation.set(90, 0, 0); // default rotation goes here
const MainObject = new THREE.Object3D();
MainObject.add(ChildObject);

Serval