Loading a glTF model twice inside the loader.load();

Hello everyone ,

Is it possible to load an object twice , inside the loader.load() ?
What I mean by “load an object twice” , something like :

            loader.load('assets/models/scene.gltf', function ( gltf ) {

                    GLTF = gltf;
                    //gltf.scene.clone();//this isn't producing any errors but doesn't seems to work
                    gltf.scene.position.z = 7;
                    GLTF.scene.position.z = 1;
                    GLTF.scene.position.x = 2;

                    gltf.scene.scale.set(0.05,0.05,0.05);
                    GLTF.scene.scale.set(0.03,0.03,0.03);
                    //gltf.scene = gltf.scene + GLTF.scene //this is not working + produce error
                    world.add( gltf.scene );
                    world.add( GLTF.scene ); //this doesn't produce any error but doesn't seems to work

Hope the code above describes what I exactly want to achieve , if not then imagine a copy+paste Unreal Engine 4 3D object operation , that’s what I want to do : within the loader.load mechanism get the model and create it twice in the scene.

After some search on the internet , I’ve found some people that says this thing is impossible at this moment so I decided to try my luck here too.
What do you think?

Thank you for help!

What’re you’re looking for is Object3D.clone() which will copy all the data of an object and allow you to change them independently.

So your code would change to:

loader.load('assets/models/scene.gltf', function ( gltf ) {
    let copy = gltf.clone();

    gltf.scene.position.z = 7;

    copy.scene.position.z = 1;
    copy.scene.position.x = 2;

    gltf.scene.scale.set(0.05,0.05,0.05);
    copy.scene.scale.set(0.03,0.03,0.03);

    world.add(copy.scene);
    world.add(gltf.scene);
});

Note that you may need to use SkeletonUtils.clone( source ) if the model uses skinning animation. For example:

var source = gltf.scene;
var copy = THREE.SkeletonUtils.clone( source );
world.add( source );
world.add( copy );
2 Likes

Hi & thanks for reply !

@donmccurdy yes , my model is using animations , I’ll use that

@davidpox when I run :

let copy = gltf.clone();

I get this error :

TypeError: gltf.clone is not a function
at index:375
at GLTFLoader.js:84
at GLTFLoader.js:1591

The three.js version I’m using :
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>
The GLTFLoader version I’m using :
<script src="https://cdn.rawgit.com/mrdoob/three.js/r106/examples/js/loaders/GLTFLoader.js"></script>

Those 2 glTF and THREE versions are the latest ones , I don’t think it’s a good idea to set them to an older version.What do you think?

Sorry, usually depends on your workflow. because you’re importing animations, you need to do gltf.scene.clone().

But as @donmccurdy said, you’ll want to use SkeletonUtils.clone(source); instead, because the standard Object3D.clone() doesn’t copy over Skinned meshes, bones, etc.

1 Like