Child object in Three.js does not inherit transformation from its parent

Question

Child object in Three.js does not inherit transformation from its parent

Consider a scenario where there is a main object with multiple child objects in a given scene.

Update: Here is the code snippet for creating a mesh (assuming the scene and camera are already set up).

Code snippet for creating the parent group:

var geometry = new THREE.PlaneGeometry( 0, 0 );
var surface = new THREE.Group();
surface.geometry = geometry;

Child Mesh:

surface.add(new Sprite());
scene.add(surface);

Is there a way to exclude the parent's transformation matrix for the children only (while still maintaining its transformation as a parent)?

I am aware that setting matrixAutoUpdate = false; allows manual updating of the child's transformation matrix, but it still incorporates the parent's transformation matrix.

I aim to completely disregard it for the children, while retaining its global transform and being able to access its rotation, translation, and scaling values.

javascript matrix three.js transform

Answer 1

Answer №1

When it comes to sense, the group only consists of one object, causing the group to act as a single entity. It becomes difficult to associate geometry with the group, so my recommendation is to add the plane as a mesh and then manipulate it as needed.

Therefore, the updated code should appear like this:

var geometry = new THREE.PlaneGeometry( 0, 0 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
var surface = new THREE.Group();
surface.add(plane);
surface.add(new Sprite());
scene.add(surface);

Answer 2

When it comes to sense, the group only consists of one object, causing the group to act as a single entity. It becomes difficult to associate geometry with the group, so my recommendation is to add the plane as a mesh and then manipulate it as needed.

Therefore, the updated code should appear like this:

var geometry = new THREE.PlaneGeometry( 0, 0 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );
var surface = new THREE.Group();
surface.add(plane);
surface.add(new Sprite());
scene.add(surface);

Answer 3

Answer №2

Javascript is a fascinating language to work with! The possibilities are endless.

If you want to modify the behavior of a specific child Object3D instance, you can simply override the #updateMatrix function like this:

myChildObject3D.updateMatrixWorld = function( force ) {
    if ( this.matrixAutoUpdate ) this.updateMatrix();
    if ( this.matrixWorldNeedsUpdate || force ) {
        this.matrixWorld.copy( this.matrix );
        this.matrixWorldNeedsUpdate = false;
        force = true;
    }
}

By replacing the original Object3D#updateMatrixWorld with this custom function, you can ensure that the transformation of the object remains unaffected by its parent's transformation.

Answer 4

Javascript is a fascinating language to work with! The possibilities are endless.

If you want to modify the behavior of a specific child Object3D instance, you can simply override the #updateMatrix function like this:

myChildObject3D.updateMatrixWorld = function( force ) {
    if ( this.matrixAutoUpdate ) this.updateMatrix();
    if ( this.matrixWorldNeedsUpdate || force ) {
        this.matrixWorld.copy( this.matrix );
        this.matrixWorldNeedsUpdate = false;
        force = true;
    }
}

By replacing the original Object3D#updateMatrixWorld with this custom function, you can ensure that the transformation of the object remains unaffected by its parent's transformation.

Child object in Three.js does not inherit transformation from its parent

Answer №1

Answer №2

Similar questions

material-ui DropDown with an image displayed for the selected value

Error encountered with Vuetify stepper simple component wrapper and v-on="$listeners" attribute

Utilizing jQuery.post to generate a dynamic dropdown menu

Guide on inserting a new user to the db.json

Switching Symbols with JQuery

Retrieving a single object from an array in node.js utilizing elemMatch

What is the best way to narrow down the results of a v-for loop in VueJS using a computed property?

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

Implementing a dynamic function with jQuery Tokenize's change event

Tips for resolving jQuery conflict problems

How can I put a row at full-width in a Material-UI table in React

Toggle the mute and unmute feature for a participant in an AWS Chime meeting

Guide to displaying or concealing the header using PHP

Enhance user experience with Bootstrap by automatically adding a frame around a card upon clicking

Using Angular and Jade to pass an array from a controller to script tags

Laravel's routing system may cause complications when trying to send data via jQuery AJAX post requests

The toggle for hiding and showing, along with changing the button color, is not functioning properly due to

Guide on passing variables along the promise chain within a Node Express router

Tips for running a function in CodeBehind triggered by jQuery?

I am having trouble authorizing a GET request with fetch