Get same Hierarchy as in Blender and Unity (Gltf)

Questions
1

Hello helpers! :slight_smile: I have the problem, that i export two cubes from Blender with 6 different colores each. in Unity this will shown as Submeshes. But in the hierarchy i will see one object. If i import this Object in Three.js, my hierarchy looks overloaded with submeshes. Can someone helb me get the same hierarchy without merging after loading in Web. I want to open in three.js and see the same hierarchy.

image
image898×598 84.9 KB

image
image1105×647 65.9 KB

2

each face with a distinct material represents a mesh. create a palette texture instead so that all faces use the same material. if you don’t want that or know how, use https://gltf-transform.dev/ and convert the materials into a palette material. gltf-transform will also add compression.

1 Like
3

Thanks so far. After each of this solutions, will i be able to change the color of each Material in runtime?

4

Creating a palette texture and joining meshes would merge materials and meshes, reducing the scene from 12 draw calls to 1 draw call. However, the individual materials would no longer exist to be modified.

Alternatively you could use mergeGeometries with the useGroups option enabled. It will create a single geometry with groups in the same order as the input geometries. Then you could construct a single mesh from that with multiple materials:

const mesh = new THREE.Mesh( mergedGeometry, [ ... materials ] );

But personally, if you must keep the materials separate, I would use the hierarchy that you see already, with one mesh per face. Working with multi-material meshes can be more complicated.

1 Like
5

Very good answers and very helpful. But my problem is that at the moment we use Unity WebGL and the 3D files come from customers. I need a specific way to ensure that the files exported from Blender maintain the same hierarchy in Three.js. We have a huge program that depends on this kind of hierarchy, and our customers rely on it. My task is to find a way to convert the Unity program to Three.js.

6

What model format are you importing/exporting for use in your unity wegbl project?

7

I find some online editor that managed to show the Hierarchy as i wish. But i dont know how.

https://playcanvas.com/model-viewer
image

https://viewer.pavia.io/
image

Wrong
https://threejs.org/editor/
image

For unity i used pixyz and .step files. I try to use freecad to convert .Step to .gltf.

8

H.gltf (25.6 KB)
Heres the testfile

9

I traversed your H.gltf model and excluded meshes with a _ in the name.

image

Example Code below,

It matches blender

image

1 Like
10

GLTF has to restructure the hierarchy so that each mesh only has a single material.

Additionally, certain compression techniques require inserting that parent object node to re-scale the quantized model back into it’s original space.

Generally, it’s a good idea to treat nodes somewhat opaquely and not rely on the strict hierarchy layout whenever possible…

So instead of doing things like:

MyMesh = scene.children[0]

and expecting it to match your blend file, instead get things by name or similar mechanisms…

myThing = scene.getObjectByName( 'myThing' );
1 Like
11

Thanks for all your solutions and help. But i need to stick on the hierarchy from the customer. i cant explain it exactly why because for security reasons and data protection.

I found the solution for that problem. i Convert Step with freecad to gltf and convert it to fbx with blender and put it in an gzip compresseion so it takes less space. After loading this fbx in three.js it shows the right hierarchy.

At first i want to stick with gltf because of the extra converting step and the filesize but so it works for my needs.

1 Like