# How to (properly) reparent an object?

**URL:** <https://discourse.threejs.org/t/how-to-properly-reparent-an-object/2113>\
**Category:** Questions\
**Tags:** transform-matrix\
**Created:** [March 14, 2018, 6:50am UTC](https://discourse.threejs.org/t/how-to-properly-reparent-an-object/2113 "2018-03-14T06:50:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [March 14, 2018, 6:50am UTC](https://discourse.threejs.org/t/how-to-properly-reparent-an-object/2113/1 "2018-03-14T06:50:04Z")

</div>

I’ve got a few pens. The first one looks as expected (there is no change in the rotation pattern of the box), but in the second and third pens the rotation changes suddenly (unexpectedly) when the reparenting is done in steps at different times. How do we properly re-parent the box (f.e. so that the rotation stays as expected)? Why does this happen?

1. [first one](https://codepen.io/trusktr/pen/6142d0e9231c35923630edc65ef53449?editors=0010) (works as expected)
2. [second one](https://codepen.io/trusktr/pen/5218724fafbc0beb9977e13f0b28556f?editors=0010) (doesn’t work, rotation is messed up)
3. [third one](https://codepen.io/trusktr/pen/bff5dbd28470c18097a54119f96c9978?editors=0010) (doesn’t work, rotation is messed up)

The only difference between the pens is near line `25`: the difference being the use of one, two, or three `setTimeout`s to reparent the box at different times.

The parts of the code that are different look like this:

**1:**

```auto
setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
    
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 2000)

```

**2:**

```auto
setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
}, 2000)

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 4000)

```

**3:**

```auto
setTimeout(() => {
    THREE.SceneUtils.detach( mesh, root, scene )
    console.log('detached')
}, 1000)
setTimeout(() => {
    THREE.SceneUtils.attach( mesh, scene, wayOff )
    console.log('attached')
}, 2000)

setTimeout(() => {
    THREE.SceneUtils.detach( mesh, wayOff, scene )
    console.log('detached')
}, 3000)
setTimeout(() => {
    THREE.SceneUtils.attach( mesh, scene, wayOff2 )
    console.log('attached')
}, 4000)

```