As the title says, I’m completely new to Three.js. I’m not a programmer, but a 3D-modeller and need to know, how to implement my textures into a model as well as how I can make the model look like in Blender. After 8 hours of trial and error, I still don’t know why my normal map does not create any bumps on the models surface (solid renderer) and also why my model turns black, when switching into realistic renderer although I already added ambient light. So far, I use the OBJ-format, because I don’t completely understand/like the workflow for glTF-files (texture-baking) but I guess OBJ might be part of the problem - correct me if I’m wrong.
After 8 hours of trial and error, I still don’t know why my normal map does not create any bumps on the models surface (solid renderer) and also why my model turns black, when switching into realistic renderer
Are you referring to the realistic rendering model in the three.js editor? If so then ambient lights are not supported in this mode. The other built in lights and environment maps are, though.
Regarding the issues with the normal map you should provide an example of the model your having trouble with otherwise we won’t be able to help.
1 Like
Thank you for your quick response.
Yes, I only use the three.js editor for my work. My plan is to export the finished scene, once it looks good, so our programmer has to only upload the final file without any modifications on his side.
What’s the correct file-format for environment maps though? In Blender, I use an equirectangular HDRI-map (.exr) which seems to be not supported in three.js. It didn’t work as a jpg, either.
Sadly, I couldn’t upload the Blender-file because it takes up 31 MB but here are the other files…
Color-map:
Metallic-map:
Normal-map:
Exported HDRI-map:
3D-Model: test.obj (62.1 KB)
I think that any work you do in blender should be exported as a GTLF file because that’s the easiest for threeJS to import.
(GTLF is actually two files inside a folder, but something even easier is a .glb because that’s only one file). I recommend you start by trying to export a .glb file from blender.
You will also need to install the GTLF extension, or “AddOn” in blender.
Instructions here: https://www.youtube.com/watch?v=LzdoUTvAgXk
Once your GLTF addOn/extension is installed, follow the instructions here: A Step-by-Step Guide to Exporting glTF Files From Blender - IconScout Blogs
I deleted all the lights and cameras in my blender file (after saving a backup copy) because I will add those back into the scene using threeJS later. Note that this will make the thing invisible (or black) when you open it up using 3D image viewing software. Remember to add back in this “sun” light source, once its in threeJS. In blender its called “sun”, but in threeJS, we call it THREE.HemisphereLight:
This is what the .glb file looks like after export.
If I export and open it using 3D viewer, I can see it because I didn’t delete all the lights and cameras in this case.
But, if I deleted all the lights and cameras, I see nothing.
These are the files inside the folder I named “gltf” with the GLTFs because I exported the blender file twice - once as a .glb and once as a gltf.
About GLTF files: glTF - Wikipedia
Then, your dev can just follow process to add a GLTFLoader into threeJS: Render a custom glb from blender
Diff between .obj and gltf: three.js manual
@Jeremy_Gorski here is something that might help you and make it a bit easier with different formats:
- Visit my webpage and look for
3D Viewers - Start with
OBJ Viewersince you already have OBJ + MTL + Textures files (load them all at once from a single folder by using the viewer’sBrowsebutton)- This viewer has lots of
Exportoptions so you can try exporting your model to let’s say GLB and / or 3DM format and then using the corresponding GLTF Viewer or 3DM Viewer to load and see what those exports look like
- This viewer has lots of
- 3DM Viewer will also allow you to actually load your environment map as a jpg or png file
Without knowing what your model really looks like, here is a reconstruction of it with some arbitrary MTL settings and as it shows in my viewers, with all the files attached at the end:
test.zip (3.3 MB)
Top picture is OBJ Viewer, middle picture is 3DM Viewer and the last picture is GLTF Viewer.
Make sure to inspect the pictures for what controls might be checked or active and just try doing it yourself,
Thank you for your answers. My workflow at the moment is:
- Exporting an OBJ-file from Blender
- Baking all textures at once with a plugin
- Importing the OBJ-file to three.js editor
- Loading all textures and the environment map in three.js editor
- Tweaking some settings and exporting the whole scene as a glTF or GLB-file
The reason I export OBJ from Blender is because I use a plugin that can automatically bake multiple textures but it cannot bake AO/R/M-maps from what I see. It works well so far, the only problem is that the environment map is missing in the glTF file so my glTF-file always appears too dark and unrealistic when I reopen it in the three.js editor. I thought, that glTF-files can contain lighting information 
hdrs are not exported in any format i am aware of. it doesn’t support lights in the same way they appear in blender, all you have is harsh point/directional and spot lights. this document lists everything that gets exported.
there is no realism without baking, or at least going all out with postprocessing (soft shadows, ao, ssgi, bloom, …). three accepts hdr, exr and a specific jpg format for environment maps. they are usually 1-2mb. the one you linked is here Provence Studio HDRI • Poly Haven, the 1k variant is 1.6mb.
I tried to replace my jpg-environment-map with the exr one you sent me but it seems like the three.js-editor doesn’t accept exr-files.
i don’t know about the editor, it seems unrelated, you could also do stuff in blender or maya and not be able to view it on the web as it appears there. you would probably want to create a real project and use EXRLoader like so three.js examples