Threejs when parent matrix change, children does not applied

user_12793692 0
Viewed 294

When the matrix is ​​applied to the parent object, I want the child object to be applied as well.

//set transformmatrix
const m = new THREE.Matrix4();
m.elements = [...];

//parent
var Parent = new THREE.CylinderBufferGeometry(30, 30, 30, 10);
var colortex = new THREE.Color();
colortex.setRGB(255, 0, 0);

var MatParent = new THREE.MeshStandardMaterial({
    color: colortex,
    metalness: 0,
    roughness: 0,
});

var MeshParent = new THREE.Mesh(Parent, MatParent);
scene.add(MeshParent);

//child
var Child1= new THREE.SphereBufferGeometry(100, 64, 32);
var MatChild1 = new THREE.MeshStandardMaterial({
    color: colortex,
    metalness: 0,
    roughness: 0,
});

var MeshChild = new THREE.Mesh(Child1, MatChild1);

MeshParent.add(MeshChild );
MeshChild.position.x = 0;
MeshChild.position.y = 0;
MeshChild.position.z = 200;

MeshParent.matrixAutoUpdate = false;
MeshParent.geometry.applyMatrix(m);
MeshParent.updateMatrix(true);

Before matrix apply

enter image description here

After matrix apply

enter image description here

As image show, after apply matrix, cylinder object moved, rotated by x-axis. However child object isn't worked. I want to child object is placed to red-circle I draw.

Anyone give me advise please. Thank you for read.

sorry for image upload.

three.js javascript
1 Answers

MeshParent.geometry.applyMatrix(m);

Transforming the geometry of a 3D object has no effect on the descendants's transformation. So you have to change the position, rotation or scale properties. Or alternatively, set matrixAutoUpdate to false and modify Object3D.matrix directly. Just keep in mind that in this case, you don't want to call updateMatrix() (since you already set it manually).

user_52508470
Related