Three.js - Apply rotation similar to Blender

Question

After loading a mesh, I would like to permanently change its default rotation from what's been imported in. That is, I'd like to take a mesh with rotation 0,0,0, rotate it 90 degrees on say X, then tell three.js that this new rotation should be treated as 0,0,0.

Note that I'm not simply trying to rotate the object.

In applications like Blender, this involves rotating an object, and then 'applying' that rotation which then sets the object's rotation to 0,0,0 while preserving the rotation changes.

Does three.js support something like this?

Answer 1

SOLUTION 1

You can create a wrapper object, where the child object will have the default rotation:

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

Now you can use MainObject as your object. It has rotation (0,0,0).

The same rules apply to other settings like position, rotationOrder or scale as well.

SOLUTION 2

You can set your transforms (position, rotation, scale) to your object and then apply it to the geometry of your object:

object.rotation.set(90,0,0); // your default rotation goes here
object.position.set(/*...*/); // you can do the same for position and rotation
object.scale.set(/*...*/);
object.updateMatrix();
object.geometry.applyMatrix( object.matrix );

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