After compress glb, model unable to load to the scene

I want to ask, is there something wrong with my code.? I compressed my glb converter
model because I wanted to load it maybe 300 times. Then I’ve used the GLTF loader but the model still doesn’t show up in the scene. Then I also use Draco Loader also does not appear in the scene. Here’s my model that I’ve converted.

  this.dracoLoader = new DRACOLoader();

 addAOADraco = ({
  }: {
    data?: Model3DProp;
    position?: { x: number; y: number; z: number };
  }) => {
    this.dracoLoader.load('/static/gltf/aoa1.glb', (geometry) => {
      const material = new MeshBasicMaterial({ color: 0x606060 });
      const mesh = new Mesh(geometry, material);
        object: mesh,
        textContent: data?.dasId ?? '',
        type: data?.type ?? 'aoa',
      mesh.position.set(position?.x ?? 0, position?.y ?? 0, position?.z ?? 0);

aoa1.glb (826.7 KB)

the file is not broken, it loads. probably just too big/small for your camera setup, facing the other direction, no lights, etc.

other than that, “/static” looks suspicious to me. normally the contents of /static or /public are copied into root and accessed as “/…”. you can confirm in the chrome networking tab if you see any 404’s.

I build this in react. My glb giles in public/static.
Not too big, and not too small, because its loaded already without compressed file and it works. Now I want to load it, but it seems my file too big if I load it 300 times. That’s why I compress it, however this compressed model not appear on the scene.

i don’t follow, loading it 300 times why? you would normally load it once and instance it.

your model is also way too complex for the web.

i tried loading it, instanced, 40 drawcalls for 300 models shown, but the vertex count is over the top: still-http-7o1jjl - CodeSandbox

i would re-model it more, all the internals aren’t even visible but they’re highly complex. and perhaps use something like level of detail.

Keep in mind that Draco compression makes the file smaller to download over a network, but make it any easier for the GPU to render the model. Each of these models has about 500,000 triangles, so 300 x 500,000 = 150 Million triangles. This will be too much for a web page to display all at once, even with instancing I’d expect.

Techniques you could look into would be:

  • LODs
  • 3D Tiles
  • Decimation / Simplification
  • Baking normals to a simplified mesh

Thank you much for your answer. I will take a look for instanceMesh.