Importing gLTF result in wrong UV and seems not supporting Metal?

Questions
,
1

Hey guys, i have import my scene(create and textured in blender) in threejs. however,

  1. my wall texture has wrong UV as shown in the following pic. but when i tried use another wood texture, the UV seems to be right. i had checked the scale and face normal. everything is correct.not sure why the tile texture has wrong UV. i have also attached two different material setup.
    image
    image1900Ă—1543 454 KB

    image
    image2415Ă—1658 658 KB
    z
    tile texture(the problem one):
    image
    image1764Ă—921 208 KB

    wood texture(the one that works):
    image
    image1883Ă—987 231 KB

2 question, i am not sure why all my metal material are just pure black in the scene.
here is the material setup in blender.

image
image1786Ă—890 180 KB

thanks in advance, please let me know if anymore info is needed to solve the problems.

2

I noticed that the problem seems to be i change the value of texture mapping in blender

image
image838Ă—739 73.3 KB

i set the scale to 5, and it will look good in blender, but when i export gLTF file to thireejs, the texture is not scale up to 5 but still at 1. and after
image
image1121Ă—49 9.25 KB

the texture scale can look correct now.

so basiclly, gLTF file will not export texture mapping scale info right?
if i need to adjsut any texture scaling, i have to do it in code rather than 3d packages?

3

three.js requires most textures on a material (excluding aoMap and lightMap) to share exactly the same repeat settings. If they don’t, it will pick one texture and use its settings for every texture. It would be best to make sure the model has only one UV set, as well, as that can cause similar issues if it doesn’t.

Be sure to use the guidelines in the Blender docs, “Invert” nodes will not export for example.

If that doesn’t work, could you share a .blend that reproduces this issue?

1 Like
4

Thanks for replying. Now i understand the issue.
If one mesh has more than one material, THREEJS will pick one of its scaling factor.
hence the problem is, i need to make sure all texture(on a single mesh) looks good under same scaling value. which is a bummer.
But I can also separate the model to make sure one mesh with only one material, however, i make increase the draw call and impact the performance, correct?

I have been reading the blender doc about gltf back and forth.
still a lot things has not been well documented.
something like can “Color ramp” be exported? can i use mixRGB node,etc.

5

If one mesh has more than one material, THREEJS will pick one of its scaling factor.

Not quite — if a single material has different textures with different scaling factors, three.js will pick one. But with more than one material on a mesh, each material could use a different scaling factors for its textures. As long as those textures are consistent within the material.

No, only specific nodes in Blender can typically be exported — the nodes documented in the Blender glTF exporters docs are the ones you should use. To do something like a color ramp, you would need to bake it to a texture before exporting.

1 Like
6

Not quite — if a single material has different textures with different scaling factors, three.js will pick one. But with more than one material on a mesh, each material could use a different scaling factors for its textures. As long as those textures are consistent within the material.

Well, that seems a bit conflict with my experiment.
i will try it again and report it here

7

Did a quick test and found the problem.
since in blender i am using an built-in add-on called node wrangler.
and my texture node were created by hotkey Ctrl+Shift+T
and the add-on will take care of the node setup. however, in one of the material node setup, lets call it A.
the mapping node type has been set to texture, but the mapping type in material B is set to point.
here is the screenshot of what i mean
image image

and they are different mapping method. which lead to the not-matching problem.
besides,I find when setting to type: texture. THREEJS seems not accepting this method and hence not affecting scaling in render when you change the factor in blender.(it works correctly in blender, but no effect in threejs render).

8

Hm, both Point and Texture should export to glTF according to the blender docs, and if it exports to glTF then three.js should support it too. Does your model work as expected with https://sandbox.babylonjs.com/? If not, it may be worth filing a bug on the Blender exporter.

1 Like
9

I will do more test later.
if necessary, i will report a bug,