Why is this Threejs cloned Group loaded via GLTFLoader misbehaving?

Question

So I am trying to clone the soldier model from the Three.js examples, because I want more than one later: https://threejs.org/examples/webgl_animation_skinning_blending.html

I changed line 93 to read:

            const loader = new GLTFLoader();
            loader.load( 'https://threejs.org/examples/models/gltf/Soldier.glb', function ( gltf ) {

                model = gltf.scene.clone();
                scene.add( model );

                model.traverse( function ( object ) {

                    if ( object.isMesh ) object.castShadow = true;

                } );

But now the soldier is huge.

Why is this happening and is there a fix for it?

Here is a jsfiddle showing the problem:

https://jsfiddle.net/paranoidray/jLpzk374/22/

If you check out the jsfiddle and change line 93 and remove the clone() call. Everything works again...

Any help would be very much appreciated.

Answer 1

Please clone gltf.scene like so:

model = SkeletonUtils.clone( gltf.scene );

Cloning of skinned meshes is not yet supported in the core. However, you can use SkeletonUtils.clone() to perform this task.

https://jsfiddle.net/yesxrq7g/