How can I use a mesh from a gltf (.glb) file in an instancedMesh?

[joshon]

I have a very simple mesh that I am trying to load as an instancedMesh:

https://codesandbox.io/s/laughing-gates-26zwd?file=/src/App.jsx:473-1613

The file loads, and when I log "nodes.TableMed.geometry" it prints a BufferGeometry {uuid: "2803D99A-12B5-4FCC-ABD4-B6233A0F3272", name: "", type: "BufferGeometry", index: BufferAttribute, attributes: Object…}

I try and use that as the geometry argument in the instancedMesh:

function Nodes({ nodeData }) {
  const { nodes, materials } = useGLTF("/table002.glb");
  console.log("nodes:", nodes, "materials:",materials,"nodes.TableMed.geometry:",nodes.TableMed.geometry);
  const ref = useRef();

  useLayoutEffect(() => {
    console.log("useLayoutEffect");
    const transform = new THREE.Matrix4();
    for (let i = 0; i < numberOfNodes; ++i) {
      transform.setPosition(...nodeData[i].position);
      ref.current.setMatrixAt(i, transform);
    }
  }, [nodeData]);

  return (
    <instancedMesh
      ref={ref}
      args={[nodes.TableMed.geometry, null, numberOfNodes]}
    >
      {/* <boxGeometry args={[0.8, 0.8, 0.8]}></boxGeometry> */}
      <meshBasicMaterial attachArray="material" color={"#FCC"} />
      <meshBasicMaterial attachArray="material" color={"#D42A1F"} />
      <meshBasicMaterial attachArray="material" color={"#0B0"} />
      <meshBasicMaterial attachArray="material" color={"#D42A1F"} />
      <meshBasicMaterial attachArray="material" color={"#D42A1F"} />
      <meshBasicMaterial attachArray="material" color={"#D42A1F"} />
    </instancedMesh>
  );
}

If I uncomment the <boxGeometry args={[0.8, 0.8, 0.8]}> - then it uses the box successfully, but I haven't been able to make it use the mesh from the .glb file. Hopefully, it is something obvious!

Thanks,

Josh

--

Now also trying with Suzanne: https://codesandbox.io/s/charming-monad-1iobm?file=/src/App.jsx

[joshon]

Looking around I can't find any working examples of using gLTF with R3F instancedMesh.

There are some compelling similar examples:

This loads a glb file and uses its contents as an instancedMesh in Three.js:
https://threejs.org/examples/#webgl_instancing_scatter

This use's drei's and to bring in the shoe model:
https://codesandbox.io/s/floating-instanced-shoes-h8o2d
But when I replace it with the Suzanne.glb that I downloaded from: https://drei.pmnd.rs/?path=/story/loaders-gltf--use-gltf-scene-st
I can't get it to work (although it is being used successfully as a Mesh - not instanced - on the page I took it from).

This is an example of Suzanne being successfully used in an R3F instancedMesh - but using a blob file rather than a gltf.
https://codesandbox.io/s/instancedmesh-with-suzanne-bufferload-c39fp

I am hoping this is just a syntax error.

I have also been trying adjusting the transforms with set Matrix, and copying the geometry, based on some other Three.js instancedMesh threads.

Banging my head on this wall :(

[joshon]

Success!

This one successfully imports Suzanne!
https://codesandbox.io/s/elated-lumiere-exsvq?file=/src/App.jsx:799-856

Perhaps the key lines were:

  geo.computeVertexNormals();
  geo.scale(0.5, 0.5, 0.5);

Or maybe because I switched the material. (It was see below)

I am very happy. sorry for the spam - I just had to share!

[joshon]

It was my attempt to have multiple colors of material per part of the geometry...
In this version, it works without cloning the geometry or resetting its transformations...
https://codesandbox.io/s/fast-glitter-nvifp?file=/src/App.jsx

[CodyJasonBennett]

You can also use Drei's instancing to manage this for you:

• https://twitter.com/0xca0a/status/1438083796193140739

[drcmda]

gltfjsx does this automatically now https://twitter.com/0xca0a/status/1439953570439303171 all you need is the -i flag and it will create instances from shared geometry. you also don't need to do any crazy blender stuff, if two meshes share the same geo that's already enough.