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?

WestLangley · Accepted Answer · 2023-03-02T16:44:27.787

32

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

edited Mar 02 '23 at 16:44

answered Nov 19 '14 at 17:20

WestLangley

102,557
10
276
276

1

How do I do it for a THREE.Group() which can in turn contain THREE.Group()? – Amritesh Anand Apr 04 '18 at 07:49
@AmriteshAnand You will need to make a new post and show your code if you have a question. – WestLangley Apr 04 '18 at 16:46
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 – aggregate1166877 Mar 02 '23 at 14:00
@aggregate1166877 Thanks. Method name updated. – WestLangley Mar 02 '23 at 16:46

score 0 · Answer 2 · answered May 01 '21 at 07:57

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);

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

2 Answers2

Linked

Related