Blender Exported GLB to Three.js: Multiple Geometries for Single Cube with Multiple Materials?

Questions
, ,
1

I’m currently working on 3D web Editor, like our beautiful three.js-editor, with colorful style with react.

I recently encountered an interesting situation while working with Material methods. typescript says to me “Mesh” can have “THREE.Material” or "THREE.Material[array] ".

A GLB file exported from Blender and imported into Three.js. In Blender, I had a single cube with multiple materials applied to it. However, upon importing this GLB into Three.js, I noticed that the single cube was split into six separate geometries, each with its own single material.

From my understanding, it appears that the Three.js loader is modifying the GLB file to create multiple geometries for a single object with multiple materials. Is this an accurate understanding of how the Three.js loader handles GLB files with multiple materials on a single object?

image
image1772×1076 94.2 KB

Thanks for reading this🙏!!
Picture above is the situation that .glb exported from three-editor came back to blender

2

THREE produces a mesh for every material imported, parented into a group object. You can post process from there

3

Then, the only case I can imagine is, directly using material array in my code (like below)?

const cube = new THREE.Mesh(geometry, [material1, material2]);
4

Rather - there’s no case for it. This notation is mostly legacy and has not much practical use - with GLTFLoader or without.

WebGL can bind one material shader at a time - so whether you’ll go with:

Group ->
  Mesh_A ->
    Geometry_A
    Material_A
  Mesh_B ->
    Geometry_B
    Material_B

or

Mesh_AB ->
  Geometry_AB
  [ Material_A, Material_B ]

That’s still going to be 2 draw calls on two separate geometry+material pairs (in the second case you’re just mapping the materials using BufferGeometry.groups instead of actual groups.)

The advantage of the first approach (the one also used by GLTF) is that you can quite way simpler modify geometry+material pairs (their geometries, positions, visibility etc.) at any time using just the Mesh API, without the need of modifying the position attribute of BufferGeometry by hand.

2 Likes