Assigning the matrixWorld attribute to an object in three.js

Question

Assigning the matrixWorld attribute to an object in three.js

I'm working with a 4x4 transformation matrix in Octave that encodes rotation and position data. After confirming that this matrix represents a valid transformation, I want to use it to set the matrixWorld property of a three.js Object3D object. This involves setting the position and rotation of the object based on the transformation matrix.

Based on information from the three.js documentation and various discussions online, it seems that setting nameOfObject.matrixAutoUpdate to false is crucial. However, despite trying different approaches to set nameOfObject.matrixWorld, the object still renders at the origin with no rotation.

Here are the methods I've attempted within an update method before calling render():

// Creating a three.js matrix
var tempMatrix = new THREE.Matrix4();
tempMatrix.fromArray(arrayContainingTransformationMatrix);

// Values are correctly set
console.log(tempMatrix.elements);

// The following approaches were tried individually

// First approach (unsuccessful)
nameOfObject.matrixAutoUpdate = false;
nameOfObject.matrixWorld.copy(tempMatrix);

// Second approach (also unsuccessful)
// Based on a related SO question
nameOfObject.matrixAutoUpdate = false;
nameOfObject.matrix.copy(tempMatrix);
nameOfObject.updateMatrixWorld(true);

// Third approach (also unsuccessful)
nameOfObject.matrixAutoUpdate = false;
nameOfObject.matrixWorld.fromArray(arrayContainingTransformationMatrix);

// Regardless of the approach, the console shows correct values
console.log(sphere1.matrixWorld.elements);

Some additional points to consider:

I understand that setting matrixAutoUpdate to false may not need to be repeated in every iteration, but I have done so as a precaution.
Modifying nameOfObject.position based on the fourth column of the transformation matrix results in the expected position change, ruling out a rendering issue.
While it's advised not to call updateMatrix() when manually adjusting the matrix, information on the implications of updateMatrixWorld() is less abundant.

Any advice on this matter would be greatly appreciated. If needed, I will delve into the source code, but I believe there might be a simple solution I am overlooking in my use of three.js.

javascript matrix 3d three.js transform

Answer 1

Answer №1

At the present moment, I have successfully obtained the desired outcome by adjusting the object's matrix property (which represents the local transform in relation to the object's parent). Given that the object's parent is scene, the following code snippet functions as intended:

scene.add(nameOfObject);

// Utilizing this transformation matrix (a translation of two units along the x-axis):
// 1 0 0 2
// 0 1 0 0
// 0 0 1 0
// 0 0 0 1

// Column-major rendition of the transformation
var tempArrayCM = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 0, 0, 1];
// As per the documentation, Matrix4.fromArray() employs column-major format

// Row-major rendition of the transformation
var matrixT = new THREE.Matrix4();
matrixT.set(1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// As per the documentation, Matrix4.set() employs row-major format

nameOfObject.matrixAutoUpdate = false;

nameOfObject.matrix.fromArray(tempArrayCM); // This functions as expected

//nameOfObject.matrix.copy(matrixT); // This also functions as expected

//nameOfObject.matrixWorld.fromArray(tempArrayCM); // Does not have any effect

//nameOfObject.matrixWorld.copy(matrixT); // Does not have any effect

It appears that setting matrixWorld does not yield the desired results. This may not pose an issue when the object is a child of scene, but complications can arise if the object is a descendant of a child of scene and there is a need to set its global position independently from its parent (edit: it seems that the attach and detach methods from SceneUtils could facilitate this, albeit indirectly).

I will refrain from marking this as the definitive solution since it is essentially a workaround that is applicable only when the object's parent is scene.

On a side note: I find it slightly peculiar that Matrix4.set() utilizes row-major order while Matrix4.fromArray() and Matrix4.elements utilize column-major order.

Answer 2

At the present moment, I have successfully obtained the desired outcome by adjusting the object's matrix property (which represents the local transform in relation to the object's parent). Given that the object's parent is scene, the following code snippet functions as intended:

scene.add(nameOfObject);

// Utilizing this transformation matrix (a translation of two units along the x-axis):
// 1 0 0 2
// 0 1 0 0
// 0 0 1 0
// 0 0 0 1

// Column-major rendition of the transformation
var tempArrayCM = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2, 0, 0, 1];
// As per the documentation, Matrix4.fromArray() employs column-major format

// Row-major rendition of the transformation
var matrixT = new THREE.Matrix4();
matrixT.set(1, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
// As per the documentation, Matrix4.set() employs row-major format

nameOfObject.matrixAutoUpdate = false;

nameOfObject.matrix.fromArray(tempArrayCM); // This functions as expected

//nameOfObject.matrix.copy(matrixT); // This also functions as expected

//nameOfObject.matrixWorld.fromArray(tempArrayCM); // Does not have any effect

//nameOfObject.matrixWorld.copy(matrixT); // Does not have any effect

It appears that setting matrixWorld does not yield the desired results. This may not pose an issue when the object is a child of scene, but complications can arise if the object is a descendant of a child of scene and there is a need to set its global position independently from its parent (edit: it seems that the attach and detach methods from SceneUtils could facilitate this, albeit indirectly).

I will refrain from marking this as the definitive solution since it is essentially a workaround that is applicable only when the object's parent is scene.

On a side note: I find it slightly peculiar that Matrix4.set() utilizes row-major order while Matrix4.fromArray() and Matrix4.elements utilize column-major order.

Answer 3

Answer №2

Examining the source code.

updateMatrix: function () {
        this.matrix.compose( this.position, this.quaternion, this.scale );
        this.matrixWorldNeedsUpdate = true;
    },

Upon closer inspection, it becomes evident that the matrix of an Object3D is constructed using its position, quaternion, and scale properties.

Therefore, instead of directly setting the matrix, it may be more convenient to manipulate the individual components that make up the matrix.

For instance, the following code snippet repositions the scene to center it within a specified range and scales it accordingly.

    let xrange = xmax-xmin, yrange = ymax-ymin, zrange = zmax-zmin;
    let range = (xrange+yrange+zrange)/3;
    scene.scale.set(2/range,2/range,2/range);
    scene.position.set( -(xmax+xmin)/2, -(ymax+ymin)/2, -(zmax+zmin)/2); 
    seene.updateMatrix();

Answer 4

Examining the source code.

updateMatrix: function () {
        this.matrix.compose( this.position, this.quaternion, this.scale );
        this.matrixWorldNeedsUpdate = true;
    },

Upon closer inspection, it becomes evident that the matrix of an Object3D is constructed using its position, quaternion, and scale properties.

Therefore, instead of directly setting the matrix, it may be more convenient to manipulate the individual components that make up the matrix.

For instance, the following code snippet repositions the scene to center it within a specified range and scales it accordingly.

    let xrange = xmax-xmin, yrange = ymax-ymin, zrange = zmax-zmin;
    let range = (xrange+yrange+zrange)/3;
    scene.scale.set(2/range,2/range,2/range);
    scene.position.set( -(xmax+xmin)/2, -(ymax+ymin)/2, -(zmax+zmin)/2); 
    seene.updateMatrix();

Answer 5

Answer №3

Typically, the matrixWorld of an object is updated using the methods outlined below:

    let object = new THREE.Object3D();
    let matrixWorld = new THREE.Matrix4();
    // By decomposing the matrixWorld, we can update the object's position, rotation, and scale.
    matrixWorld.decompose(object.position, object.rotation, object.scale);

These recommendations are provided in the official documentation for the Three.js library.

Answer 6

Typically, the matrixWorld of an object is updated using the methods outlined below:

    let object = new THREE.Object3D();
    let matrixWorld = new THREE.Matrix4();
    // By decomposing the matrixWorld, we can update the object's position, rotation, and scale.
    matrixWorld.decompose(object.position, object.rotation, object.scale);

These recommendations are provided in the official documentation for the Three.js library.

Assigning the matrixWorld attribute to an object in three.js

Answer №1

Answer №2

Answer №3

Similar questions

"Error encountered when attempting to call the requestFocus() method on a Java applet from JavaScript

Improve the translation animation on an element containing numerous child nodes

Learn how to use the Firebase Adapter for Next Auth to easily sign in using your email and password

Discovering the technique to interact with obscured objects through a haze of PointsMaterial in three.js

What is the best way to utilize this resulting value as an input?

What is the best way to implement custom serialization for Date types in JSON.stringify()?

Examining the process through which an element attains focus

Tips on ensuring Angular calls you back once the view is ready

"Turn a blind eye to Restangular's setRequestInterceptor just this

Steps to implement jQuery after executing the command "npm install jquery"

Discover how to access all of the response headers from an HTTP request in Angular

Leveraging Three.js Raycaster for a seamless PDF download functionality

What could be causing my Express API registration route to fail when attempting to POST?

Unexpected behavior encountered with Angular module dependency injection

Sending dynamic data through AJAX to a CodeIgniter controller is a common task that allows for seamless

Troubleshooting Variable Issues in PHP and JavaScript

Problem arises when a recursive function call is nested within a request in an asynchronous setting

Using Vue.js to apply different CSS classes based on multiple conditions

Submit a data array using formData through axios

Verify whether all the elements within a specific div are distinct by utilizing jQuery