Importing Procedural Materials from Blender

Hello there! I’m very new to three js and I’m still grasping how to correctly use this tool, so I am a bit confused with how I should manage my materials.

For my work we are required to import the 3d model of the logo of our client into a ThreeJS scene, but said mesh uses various procedural materials: two different kind of metals and a colorful glass. This materials were created using Blender cycles engine.

I am using the gltf loader to import the model but when importing it with those materials on it looks pure black.

Is there a way I could import them correctly? or should I just bake what’s possible and hope for the best even if it looks off? the model should look good at any angle and it will most likely be an interactive asset, that’s why I’ve been recluctant to bake a certain lightning angle for example.
Or maybe there’s some useful tool or tutorial I could follow along to learn how to recreate these kinds of textures into threejs?

Thanks in advance for any help provided, it is very welcomed.

hi @sarmak and welcome
there is always a bit of confusion at the start.
Blender procedural nodes are not supported in shader export, but this is like every realtime render engine…

The list of supported nodes, with explanations of use, is described in the official blender documentation
https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html

six channel are available… :
Base Color
Metallic
Roughness
Baked Ambient Occlusion
Normal Map
Emissive

…and correctly used in Principled BSDF you can raplicate almost everything, and usually I don’t need to bake light position but only surface behaviour ( lights and shadows of threejs will give excellent results).

As you have already guessed you have to UVmap/unwrap and to bake all the channels involved in your effect, as you surely already know, the bake must be done in cycle.
While, to better evaluate the correspondence between blender and threejs, at the end of baking process, I suggest you to use eeve in preview.

Please don’t see too much complexity in these procedures, because when I found out what could be transferred from Blender in the GLTF format I was the happiest person in the world.
Before this format it was really much more complicated.

Remenber: Blender is the best gltf exporter, and gltf is the best exchange format for webGL.
It just takes a little practice, and you will be the best too.
Good Blender in Threejs

1 Like

Thank you! I will definitely look into it.