# Add children to a group break traverse method

**URL:** <https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642>\
**Category:** Questions\
**Tags:** pivot-point, group\
**Created:** [February 10, 2020, 4:25pm UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642 "2020-02-10T16:25:44Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![odd-one](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/odd-one/32/9105_2.png) [@odd-one](https://discourse.threejs.org/u/odd-one)\
**Post date:** [February 10, 2020, 4:25pm UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/1 "2020-02-10T16:25:44Z")

</div>

Hi there!  
I would like to traverse the whole scene looking for a certain child (which is actually a grand-child) and then add it to another group in order to change its pivot point (it’s a door).  
Here’s my code:

> ```
> pivot(nome, lato) {
> scene.traverse(child => {
> if (child instanceof THREE.Mesh){
> if (child.name.includes(nome)) {
> let box = new THREE.Box3().setFromObject( child );
> let pivotAnta = new THREE.Group();
> scene.add(pivotAnta);
> if (lato === "sx") {
> pivotAnta.position.set(box.min.x, 0, box.min.z);
> } else if (lato === "dx") {
> pivotAnta.position.set(box.max.x, 0, box.min.z);
> } else if (lato === "up") {
> pivotAnta.position.set(0, box.max.y, boxSX.min.z);
> } else if (lato === "down") {
> pivotAnta.position.set(0, box.min.y, boxSX.min.z);
> } else {
> console.log("errore: non hai specificato il lato di apertura")
> }
> let pivotHelper = new THREE.AxesHelper( 500 );
> pivotAnta.attach(pivotHelper);
> pivotAnta.rotation.y = 0;
> pivotAnta.rotation.z = 0;
> pivotAnta.rotation.x = -Math.PI / 2;
> pivotAnta.scale.x = 0.01;
> pivotAnta.scale.y = 0.01;
> pivotAnta.scale.z = 0.01;
> pivotAnta.add(child);
> // console.log("hai collegato "+child.name+" a "+pivotAnta.name);
> } else {
> // console.log(child.name);
> }
> }
> });
> },
> 
> ```

Now, it works since it comes to the first child that makes the ifs true and then break the traverse saying “TypeError: Cannot read property ‘traverse’ of undefined”.

Can you help me understand why?

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 10, 2020, 5:07pm UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/2 "2020-02-10T17:07:16Z")

</div>

Hi!

The offending line is `pivotAnta.add(child);`. That is what breaks the tree traversal.

You should do for example (before the call to `traverse`):

```auto
var newPivots = [];

```

Then substitute the offending line with

```auto
newPivots.push( { pivot: pivotAnta; child: child } );

```

Finally, when the traversal has finished, do

```auto
for ( var i = 0, n = newPivots.length; i < n; i ++ ) ) {
    newPivots[i].pivot.add( newPivots[i].child );
}

```

---

<div class="post-metadata">

**Author:** ![odd-one](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/odd-one/32/9105_2.png) [@odd-one](https://discourse.threejs.org/u/odd-one)\
**Post date:** [February 10, 2020, 6:55pm UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/3 "2020-02-10T18:55:36Z")

</div>

Thank you @yombo!!  
It just works!

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 11, 2020, 5:52am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/4 "2020-02-11T05:52:20Z")

</div>

You are welcome 🙂

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 11, 2020, 5:55am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/5 "2020-02-11T05:55:02Z")

</div>

But… You know _why_ it works, right?

---

<div class="post-metadata">

**Author:** ![odd-one](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/odd-one/32/9105_2.png) [@odd-one](https://discourse.threejs.org/u/odd-one)\
**Post date:** [February 11, 2020, 7:54am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/6 "2020-02-11T07:54:34Z")

</div>

I clearly understand why to use array, give a name to the objects and cycle through it to parent the right children to the right pivots.  
What isn’t clear to me is why add child to a parent broke the traverse function. I thought it was conceptually right, but apparently it’s not.  
Is there a good reason why or it’s just something to know?

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 11, 2020, 8:04am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/7 "2020-02-11T08:04:25Z")

</div>

Looking at the Object3D.traverse:

```auto
traverse: function ( callback ) {
		callback( this );
		var children = this.children;
		for ( var i = 0, l = children.length; i < l; i ++ ) {
			children[i].traverse( callback );
		}
	}

```

Let’s say a child is processed and added to a new pivot. The key is that it is also removed from its parent. When `traverse` continues to execute in the parent, the for loop is broken because the children array was altered.

Hence, as a general rule, you can’t modify an object tree structure while you are traversing it.

Happy coding!

---

<div class="post-metadata">

**Author:** ![odd-one](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/odd-one/32/9105_2.png) [@odd-one](https://discourse.threejs.org/u/odd-one)\
**Post date:** [February 11, 2020, 8:22am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/8 "2020-02-11T08:22:35Z")

</div>

What can I say? I learned something thanks to you. It’s amazing to find people that use their time to help others, like you do.  
Thanks again, I very much appreciated.  
Have a nice day

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 11, 2020, 8:46am UTC](https://discourse.threejs.org/t/add-children-to-a-group-break-traverse-method/12642/9 "2020-02-11T08:46:14Z")

</div>

🎉🎉🎉  
I try to teach everytime I have a chance 🙂