Not able to render InstancedMeshes from cloned Meshes

Description of the problem:
I stumbled across this problem when I was trying to turn meshes from a GLTFModel with multiple meshes into InstancedMeshes.
This was working fine and I could instance the meshes as many times as I wanted. Just a view Meshes didn’t want to play along.
After some debugging, I realized that those meshes have been cloned by the GLTFLoader. For some reason it only rendered the first one.
When I excluded the first one from rendering, it rendered the second one and so on…

I was able to reproduce this issue on a smaller scale(see code below):
I created a Object3D with three cubes one of them is the original and two clones. When I add them to the scene, three Cubes appear as intended.
When I instance those three Meshes and add them two the scene, again…
only the first one per instance count gets rendered. Via consol log I can see that they do exist.

Am I right that .clone() is some kind of hidden instancing and double instancing doesn’t work?

Any help is greatly appreciated

Three.js version:

Chrome 80.0.3987.106

Ubuntu 16.04.5 LTS

index.html (4.6 KB)

Just to clarify: Using .clone() has nothing to do with instancing. three.js does not support auto-instancing. If you clone objects, they are independent render items rendered with separate draw calls.

TBH, I’m not sure I fully understand your question. Any chances to rephrase it so the actual issue becomes more clear?

Thanks for your quick reply.
I guess my question would be how to Instance cloned Meshes.
It doesn’t seem to work in the example code that I provided.

Probably the easiest approach is to setup an instance of InstancedMesh.

Thats what I tried, I traverse through the Object that contains the cloned meshes and use their geometry and material to create a new InstancedMesh


function makeInstancing(cubesObject, instancesCount) {
let instancedModel = new THREE.Object3D();

    let updateObjects = [];
    let randOffset = [];

    for (var i = 0; i < instancesCount; i++) {
      updateObjects.push(new THREE.Object3D());
        x: Math.random() * 20 - 10,
        y: Math.random() * 20 - 10,
        z: Math.random() * 20 - 10


    // chose .traverse() because in my Project I need to go throug all the meshes in the GLTFModel
    cubesObject.traverse(child => {
      child.matrixAutoUpdate = false;
      if (["Mesh"].includes(child.type)) {
        const InstMesh = new THREE.InstancedMesh(

        let dummy = new THREE.Object3D();

        for (let i = 0; i < instancesCount; i++) {
            Math.random() * 20 - 10,
            Math.random() * 20 - 10,
            Math.random() * 20 - 10

            Math.random() * Math.PI,
            Math.random() * Math.PI,
            Math.random() * Math.PI


          InstMesh.setMatrixAt(i, dummy.matrix);
        } =;


    return instancedModel;

I still couldn’t solve the problem. Can I provide any additional Information?