Hello,
I would like to know the best way to bake textures in Blender and import them into Three.js. I feel like I’m losing a lot of quality with my current workflow. When I check my results in Blender’s Cycles renderer, the quality appears much better. I may be missing something. Specifically, I feel like I’m losing some of the metalness when baking, and the result looks a bit flatter.
Here is the approach I’ve been using:
const loader = new THREE.GLTFLoader();
const textureLoader = new THREE.TextureLoader();
const imageAll = textureLoader.load('BAKED/full.png');
imageAll.flipY = false;
const imageAllMaterial = new THREE.MeshStandardMaterial({
map: imageAll,
metalness: 0.5,
roughness: 0.2,
});
Thanks in advance for your ideas and comments.
Pierre
Metalness & roughness visuals cannot really be baked - by baking metallic reflections you’re basically falling back to pre-PBR graphics.
If you’d like the effects in three & in blend to match (at least approximately within reason), you’d need to bake 3 textues: albedo (ie. just the surface color texture), roughness (black&white), and metalness (black&white as well.) You can combine the last two within a single texture as well - just put them in separate channels (metalness in Blue, and roughness in Green, Red you can leave at full-white.)
Then load the same PBR texture into both material props:
new MesStandardMaterial({
map: albedoTexture,
metalnessMap: pbrTexture,
roughnessMap: pbrTexture
});
2 Likes
thanks i will try this to see if its a bit closer. thanks
1 Like
For some reason, every time I try to bake the albedo map, it stays completely black. I’m not sure why—maybe it’s because the material is metallic, or the lighting is too dark. I have no idea.
So, I finally decided to stick with one PNG file and not create separate metallic and roughness maps. I also realized that lighting in Three.js significantly affects the final result. Initially, I was only using one ambient light, but now I’ve switched to using a spotlight. The result is much better with the spotlight.
