I have made a 3D model in blender that will be used in an web application made using three.js. I have added area lights, point lights and objects with emission inside the model to light it up but when I export it and use it in three.js the scene is completely black. After researching online, I got to know to that I can bake lights into the texture. I tried this solution but it didn’t help. While exporting, I also tried ticking the punctual light checkbox but got the same result. The walls and windows seen in the model as made using Archimesh. Stairs and the first floor is made by me. The defaults textures given by archimesh are also changed. Can anyone suggest me what I can do to resolve this issue.
model as seen in blender
model as seen in web app
model without the main area light
If it didn’t help, then the baking wasn’t done correctly – this method replaces your base color textures in the model, so if the textures are there the baked lighting will be there.
I have added area lights, point lights and objects with emission inside the model to light it up…
Area lights cannot be exported. Emissive objects do not cast light into the scene in three.js to illuminate other objects, although you can create a nice glow around them using bloom effects. Point lights will export only if you have that “punctual lights” checkbox enabled, but frankly, it’s very difficult to get the intensity of the light to match up from one software to another.
Finally … keep in mind that punctual lights like THREE.PointLight are very expensive if you have more than 3-4 of them. To get results like you’re showing in Blender above, I think baking lights would probably be the preferable choice here.
Hello @donmccurdy, thanks for the reply. I tried baking lights again into the texture I think its working now but not getting the desired results. I just had another question that do I need to add additional lights in three.js code to light up for the scene. I can see the some lights when I import the model using three.js but not the desired result I wanted for lights as seen in blender.
Once you’ve baked lighting to a texture, that texture can be moved to the material output “surface” socket like this:
Then every surface should appear exactly as it does in Blender, if the lighting is correctly baked into a texture. The surface should neither require lights, nor respond to lights.
Any non-surface effects (like glow around lights) you would need to recreate in three.js.
I have applied the texture the same way you have mentioned. When I see it in online gltf viewer I can see the surface lit up as seen in blender(https://gltf-viewer.donmccurdy.com/). My question was if I need to add another light inside to make it visible as the wall seems dark as seen in the previous image but the white floor has some light. The blender environment is lit up using an area light.
If the model requires lighting, then the lighting has not been baked. I do not recommend exporting lights inside your glTF scenes at all — it is very hard to make that match. Either bake the lighting and don’t use lights in three.js, or set up lighting in three.js.
