Hi there! I’m generating a Three.js scene from a proprietary format using BufferGeometry. The result looks good, but when I export to GLTF, the textures are messed up. It seems that all the textures are applied to all the meshes in each group and only the last one is visible.
[EDIT - SOLVED]: I figured that all the faces with the same material must be isolated in a group. Also using THREE.group rather than THREE.object3D helped.
How it looks like in Three.js:
What I get in Don’s GLTF viewer:
I inspected the GLTF file and all the textures are there.
I looked everywhere and couldn’t find any related topics, so there’s obviously something I’m doing wrong.
The code to generate the scene is long but here’s the logic.
-
Create an empty Object3D group.
-
For all the objects in the scene:
-
Sort all the faces based on their material id
-
Iterate through all the faces:
-
If the material id changed since previous face, create a BufferGeometry group to reference the previous set of faces and the material id
-
Inject the vertices and uv for each face
-
Close the final BufferGeometry group of faces with corresponding material id
-
Add the mesh to the Object3D group
-
Add the Object3D group to the scene
I can’t think of what I’m doing wrong since the scene is rendered properly in Three.js.
The resulting gltf can be downloaded from there:
https://cp.sync.com/dl/20be3f930#xpkr7k65-wpy7hbv8-2msaykus-2tk735cy