Not able to render InstancedMeshes from cloned Meshes

Questions
1

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
Kahita

Three.js version:
114

Browser:
Chrome 80.0.3987.106

OS
Ubuntu 16.04.5 LTS

Code:
index.html (4.6 KB)

2

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?

3

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.

4

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

5

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

Code:

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());
      randOffset.push({
        x: Math.random() * 20 - 10,
        y: Math.random() * 20 - 10,
        z: Math.random() * 20 - 10
      });
    }

    cubesObject.updateMatrixWorld();

    // 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(
          child.geometry,
          child.material,
          instancesCount
        );

        let dummy = new THREE.Object3D();

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

          dummy.rotation.set(
            Math.random() * Math.PI,
            Math.random() * Math.PI,
            Math.random() * Math.PI
          );

          dummy.updateMatrix();

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

        InstMesh.name = child.name;

        instancedModel.children.push(InstMesh);
      }
    });

    return instancedModel;
  }
6

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