# Why is the part of my selected model not centered ？

**URL:** <https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135>\
**Category:** Questions\
**Tags:** animation\
**Created:** [June 11, 2021, 5:19am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135 "2021-06-11T05:19:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanin/32/6452_2.png) [@seanin](https://discourse.threejs.org/u/seanin)\
**Post date:** [June 11, 2021, 5:19am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/1 "2021-06-11T05:19:15Z")

</div>

this is the demo [http://bmw.jingge.com/presale/jgzs3d/](http://bmw.jingge.com/presale/jgzs3d/)  
This is how it works  
[1623388794625.mp4 - Google Drive](https://drive.google.com/file/d/1G7fbJmjHROo9muldAua4_O-_CrfuEq_P/view?usp=sharing)

```javascript

        // 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 () {
            
            }
        })

```

```javascript
    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,
        }
    }

```

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [June 11, 2021, 7:34am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/2 "2021-06-11T07:34:09Z")

</div>

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

```javascript

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)
    }
  
})

```

---

<div class="post-metadata">

**Author:** ![seanin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanin/32/6452_2.png) [@seanin](https://discourse.threejs.org/u/seanin)\
**Post date:** [June 16, 2021, 2:41am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/3 "2021-06-16T02:41:24Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/8/f8137fb4067c8c9428d7121ad457cb857ba0499d.png)

BoundingBox very big.

* * *

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/2/024617f919cd3d6ec8fadbf52d9bfc8ab69c5d27.png)

---

<div class="post-metadata">

**Author:** ![seanin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanin/32/6452_2.png) [@seanin](https://discourse.threejs.org/u/seanin)\
**Post date:** [June 16, 2021, 5:33am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/4 "2021-06-16T05:33:59Z")

</div>

If i add this code in `onComplete` function

```javascript
 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：

> **[1623815814203.mp4 (video)](https://drive.google.com/file/d/1ppbOFdWvZPlCyaUsZI2tbxvevA0jiS3v/view?usp=sharing)**
>
> Google Drive file.

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 ?

---

<div class="post-metadata">

**Author:** ![seanin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanin/32/6452_2.png) [@seanin](https://discourse.threejs.org/u/seanin)\
**Post date:** [June 16, 2021, 6:20am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/5 "2021-06-16T06:20:47Z")

</div>

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

> **[1623825465953.mp4 (video)](https://drive.google.com/file/d/1ao8OSdJVRGTmc65Op22-CRccbK2gdymT/view?usp=sharing)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [June 20, 2021, 10:08pm UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/6 "2021-06-20T22:08:01Z")

</div>

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)`

---

<div class="post-metadata">

**Author:** ![seanin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanin/32/6452_2.png) [@seanin](https://discourse.threejs.org/u/seanin)\
**Post date:** [July 23, 2021, 7:39am UTC](https://discourse.threejs.org/t/why-is-the-part-of-my-selected-model-not-centered/27135/7 "2021-07-23T07:39:09Z")

</div>

I have solved the problem, thank you very much