Three.js child ignore parent transformation

1
votes

Let's say I have a parent and n children objects of the parent in a scene.

Edit: added code for mesh creation (assuming that I have a basic scene and camera set up)

parent group creation: 

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 I can ignore the parent's transformation matrix for the children only (but keep its transformation intact as a parent )?

I know that matrixAutoUpdate = false; lets me update the child's transformation matrix manually, but it still applies the parent transformation matrix.

I want to ignore it completely for the children, but still be able to preserve its world transform and extract its rotation, translation, and scaling values.

2
javascriptmatrixthree.jstransform
Can you share your code for the mesh created for better answer. – Ullas Hunka
Yes, I have posted the mesh creation code. – jshamble
That's a group, not a mesh first! threejs.org/docs/#api/objects/Group Please go this link first. – Ullas Hunka
Why are you doing it this way? Why not create the surface as an independent mesh? If the surface is intended to be transformed independently from the other objects (sprites), then it should be independent from them. – TheJim01
I would like to extract and selectively apply certain traits from the parent to children... I do not want the whole transformation matrix applied, I want to make a custom matrix where I can choose and extract the parent's traits and apply them to the children, not have it done for me by Three.js – jshamble

2 Answers

0
votes

In sense, there is only one object in the group so the group will behave like a single entity. And you can't associate the geometry with the group so my suggestion will add the plane as mesh and then do whatever you want to.

So updated code shall look like as follows:

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

Whatever there is to say about javascript, it's a pleasure to hack with!

You can just overload the #updateMatrix function of the specific child Object3D instance by doing something 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;
    }
}

The original Object3D#updateMatrixWorld will multiply the local matrix and the parent's matrix. It also calls the update function on its children.

Here, I switch it with a function that only copies the local transformation matrix so that it's transformation is independent of its parent.