Handling Multi-Material GLB Exports from Blender to Three.js

Based on the issue you're describing, it seems you're encountering a common challenge when working with multi-material objects exported from Blender to Three.js.

Understanding the Problem

When you export with "No export" for materials, your geometry loads but isn't visible because the material information is missing. When you use "Placeholder" materials, you're getting an error because Three.js is trying to access morphAttributes on an undefined geometry property within a Group object.

Possible Solutions

1. Check your model structure in Three.js: After loading the GLB, inspect the loaded object structure using console.log to understand how it's organized. Groups typically contain Mesh objects, which should have geometry and material properties.

2. Apply materials manually after loading: You can traverse the loaded model and apply materials to each mesh:

JAVASCRIPTCopied
gltfLoader.load('your-model.glb', (gltf) => {
  const model = gltf.scene;
  
  model.traverse((child) => {
    if (child.isMesh) {
      // Apply materials based on material index or name
      child.material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
      // Or use your own material array for multi-material objects
    }
  });
  
  scene.add(model);
});

3. Fix your Blender export settings:

   • Make sure your materials are properly assigned to faces in Blender
   • Try exporting with "Export Materials" option enabled
   • Check that your mesh has proper UV maps if using textured materials
   • Ensure your mesh is not just a collection of loose parts

4. Use a different material option in Blender export: Try the "Export" option instead of "Placeholder" to include the full material definitions.

5. Check for mesh structure issues: Ensure your Blender model has proper geometry before export (no n-gons, proper face orientation, etc.)

If you need more specific help, you might want to share a minimal example of your Blender file and the code you're using to load and display the model in Three.js.