Why is the part of my selected model not centered ？

Questions
1

this is the demo http://bmw.jingge.com/presale/jgzs3d/
This is how it works
1623388794625.mp4 - Google Drive


        // const aabb = new THREE.Box3().setFromObject( obj );
        // const center = aabb.getCenter( new THREE.Vector3() );
        // const size = aabb.getSize( new THREE.Vector3() );
        const box3 = getBox3InfoFromObject(obj);
        const target = new THREE.Vector3(box3.center.x, box3.center.y, box3.center.z + box3.size.z + 150);

        gsap.to(camera.position, {
            duration: 1,
            x: target.x,
            y: target.y,
            z: target.z,// maybe adding even more offset depending on your model
            onUpdate: function () {
                camera.lookAt( box3.center );
                // controls.target.copy(center);
                // controls.update();
            },
            onComplete: function () {
            
            }
        })

    const getBox3InfoFromObject = (obj:any) => {
        const aabb = new THREE.Box3().setFromObject( obj );
        const center = aabb.getCenter( new THREE.Vector3() );
        const size = aabb.getSize( new THREE.Vector3() );
        return {
            aabb: aabb,
            center: center,
            size: size,
        }
    }
2

I guess this has to be a problem with how you set the OrbitControls target. Code for that would be good to see

Also Box3().setFromObject( o ) will take every object, even when invisible, into account. I would try to make everything visible and/or draw a box for the boundbingbox of each object to see if there is any obj that is not positioned correctly and is overlapping


object.traverse(o => {
   
    o.visible = true

    o.updateMatrix()

    if(o.geometry) {

        o.computeBoundingBox()

        let size = new THREE.Vector3()
        o.boundingBox.getSize(size)

        let g = new THREE.BoxGeometry(size.x, size.y, size.z)
        let b = new THREE.Mesh(b, new THREE.MeshBasicMaterial({ transparent: true, opacity: .5 })

        scene.add(b)
    }
  
})
3

image
image1669×753 185 KB

BoundingBox very big.

image
image1633×658 216 KB

4

If i add this code in onComplete function

 onComplete: function () {
                var box = new THREE.Box3().setFromObject( obj );
                box.getCenter( obj.position ); // this re-sets the obj position
                obj.geometry.center();
            }
        })

The selected part node is centered .
Like this effect：

But with this centring, the part node is out of the model, and I don’t want to center to change the local position of the part node.

I want to center the selected model node without changing the local position of the part node.

Move the model position as a whole? Continue adjusting the camera? or ?

5

Now, as far as the position is concerned, it’s almost done what I want .

Calculate the global coordinates corresponding to the local coordinates of the component nodes.

Because the global coordinate of my overall model is 0,0,0

Subtract the global coordinates of the node from the global coordinates of the model

Can let the node disguised to reach the global location 0,0,0

this is the effect

6

sorry for the late reply. This looks like your animation has the worng target point and as soon as the animation is done, its set correctly? Can you show some code?

BTW If you want to find out the world coordinates of a child model, you can use obj.getWorldPosition(vec3)

7

I have solved the problem, thank you very much