Importing Procedural Materials from Blender

Questions
, ,
1

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.

2

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

2 Likes
3

Thank you! I will definitely look into it.

4

Excuse me, so if i import a gltf obj it will also import the emissive from the obj? Because the emissive is not working in my browser. Thank you beforehand

5

the reasons for your problem can be many
Try to upload a live example in a new question

6

Im kinda new here,sorry but how can i do that?

7

Sorry what i mean is what is a live example?

8

@shertea please share something that allows others to quickly reproduce the problem you’re having, if a three.js feature like emissive is not working. Common choices are:

  • Codepen
  • JSFiddle
  • Codesandbox
  • GitHub repo
  • Website

Probably best to start a new thread on the forums, this is a pretty old thread and emissive does not require procedural materials.

Also — if you are expecting to see a glow around your emissive materials, you have to use a “bloom” effect (with post-processing) for that. See these examples: three.js examples

1 Like
9

Thank you very much sir, i was lacking in bloom. Thank you really!!

1 Like