New at three.js, I want to place 3d-glb model in another 3d glb model, How can i achied child co-ordiate to be relative to parent

Questions
, , , ,
1 

// Create a Three.js scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x999999);

// Create a directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 20, 10);
scene.add(directionalLight);// Set light position


// Create an ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
scene.add(ambientLight);

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // Set renderer size
document.body.appendChild(renderer.domElement); // Append renderer to the document body

// Define camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50);

// Define camera controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Add damping for smoother movements
controls.dampingFactor = 0.25; // Adjust damping factor
controls.rotateSpeed = 0.5; // Adjust rotation speed
controls.zoomSpeed = 1.2; // Adjust zoom speed
controls.enableZoom = true;

// Load the parent GLB object
const parentLoader = new THREE.GLTFLoader();
parentLoader.load('scan.glb', parentGltf => {
    const parentObject = parentGltf.scene;

    // Adjust model scale
    parentObject.scale.set(7, 7, 7);  // Scale parent object down by a factor of 10

        // Load the child GLB object
    const childLoader = new THREE.GLTFLoader();
    childLoader.load('stylized_chairs.glb', childGltf => {
        const childObject = childGltf.scene;

        childObject.scale.set(0.1, 0.1, 0.1); 
        
        //  // Get the position of the parent object
        //  const parentPosition = new THREE.Vector3();
        //  parentObject.getWorldPosition(parentPosition);
 
        //  // Set the position of the child object relative to the parent
        //  childObject.position.sub(parentPosition);

        // Get the parent object's position in world coordinates
        const parentPosition = parentObject.position;
        childObject.position.set(parentPosition.x , parentPosition.y, parentPosition.z);

        parentObject.add(childObject);



        

       // Traverse through all children of the parent object
       parentObject.traverse(child => {
        if (child.isMesh) {
            // Apply a new material with the desired color
            child.material = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.5, metalness: 0.1 }); // Red color
        }
    });

    // Add the parent object to the scene
    scene.add(parentObject);

    // Start the animation loop
    animate();
    });
});

// Define the animate function
function animate() {
    requestAnimationFrame(animate); // Request the browser to call animate() again before the next repaint

    controls.update(); // Update controls
    renderer.render(scene, camera); // Render the scene
}

This is my app js file, if i try to increate childObject.position.set(parentPosition.x , parentPosition.y, parentPosition.z); x axis length is is getting out of parent model, how can i achieve this, make child relative to parent.

2

parent.add( child ) ← this just adds, doesn’t recompute local position

or

parent.attach( child ) ← this attaches to parent and adjusts its local transform so child doesn’t snap to a new position… it attaches wherever it was in the world before attach

3 
    const parentPosition = parentObject.position;

    parentObject.attach(childObject);

 childObject.position.set(50 , 0, 0);

Doing this also when I attach and change the position, it is coming out of my model, so not changing wrt to the parent model.

Here parent model is the room model, and where i want to place my child object.
Can’t really figure out how to align the child objects wrt to parent.

So i want that child should remain in that parent bouncd and x,y,z coordinates to be set according to that bound only.

4

Please read the docs about .attach and .add:

https://threejs.org/docs/#api/en/core/Object3D.attach

https://threejs.org/docs/#api/en/core/Object3D.add

also check out:

https://threejs.org/docs/#api/en/core/Object3D.worldToLocal

https://threejs.org/docs/#api/en/core/Object3D.localToWorld