Why are my glTF models linked when both are added to scene?

Questions
1

I am adding two glTF models to my scene. I am trying to position them separately, but moving one moves the other. I am adding them both like this:

const loader = new THREE.GLTFLoader();
loader.load(duckUrl, gltf => { duck = scene.add(gltf.scene); });
loader.load(boxUrl, gltf => { box = scene.add(gltf.scene); });

And then if I do something like box.rotateX(5) the duck also rotates. It’s almost like one is a child of the other?

I can fix it by creating an object, and adding one of them to that object, instead of to scene. Is this expected behavior?

Here is a full code example on Glitch: https://glitch.com/edit/#!/threejs-gltf-bug?path=index.html

You can comment out the following line to see the behavior I expect:

//box = object.add(gltf.scene);
2

Scene.add() returns a reference to the scene. That means both duck and box variables point to the scene which you transform in your animation loop. Use this pattern:

duck = gltf.scene;
scene.add(duck);

Fixed glitch: Glitch :･ﾟ✧

1 Like
3

Ahh, that makes so much sense!! I knew something was fishy when I noticed it happens with just any mesh I added, and had nothing to do with glTF models.

Thank you so much!!