My goal is to have the child object apply the same matrix as the parent object when the matrix is applied to the parent.
//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 applying the matrix
https://i.sstatic.net/HlIwv.png
After applying the matrix
https://i.sstatic.net/dPhVk.png
As shown in the images, after applying the matrix, the cylinder object moved and rotated along the x-axis. However, the child object did not move accordingly. I want the child object to be placed at the red circle that I drew.
If anyone can offer advice, please do so. Thank you for reading.
Apologies for the image upload issue.