I am currently working on establishing a parent/child hierarchy involving three objects using the ".add()" method in Three.js. When parenting two objects, everything works smoothly. However, I encountered an issue when trying to create a hierarchy with three levels - the middle child object suddenly jumps to an offset equivalent to its parent's offset from the origin.
Here is the hierarchy structure:
Red Box (parent of Green Box) -> Green Box (parent of Blue Box) -> Blue Box
Below is an image showing how the boxes should be positioned both before and after the parenting process: https://i.sstatic.net/Jv0ZK.png
Here is an image displaying the repositioned boxes after parenting: https://i.sstatic.net/3wMc9.png
The relevant code snippet looks like this:
var testObject_G1 = new THREE.BoxGeometry(50, 100, 100);
var testObject_G2 = new THREE.BoxGeometry(100, 100, 50);
var testObject_G3 = new THREE.BoxGeometry(50, 100, 100);
var testObject_MR = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var testObject_MG = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var testObject_MB = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var testObject_Mesh = new THREE.Mesh(testObject_G1, testObject_MR);
testObject_Mesh.position.x = -100;
var testObject_Mesh2 = new THREE.Mesh(testObject_G2, testObject_MG);
testObject_Mesh2.position.x = 0;
var testObject_Mesh3 = new THREE.Mesh(testObject_G3, testObject_MB);
testObject_Mesh3.position.x = 100;
testObject_Mesh2.add( testObject_Mesh3 );
testObject_Mesh.add( testObject_Mesh2 );
scene.add( testObject_Mesh );
You can view the JS Fiddle for this issue here: jumping second child
Thank you in advance for your help.