How can I recreate this simple scene in three.js? (Beginner)

Hi everyone, I want to recreate a scene from this design (please ignore the weird blue patches on the right wall. It should be completely white):

Refrencing my code from this thread , this is what I’ve achieved so far :

As it can be seen from the code, my geometry setup is basically 2 walls.

I am having trouble mostly with having the same point light colour as the design.

Any help would be greatly appreciated. Thanks a lot!!

If the code from the other thread does not solve your issue, you might want to use a light map to achieve the intended result. The following official example demonstrates how this could look like:

https://threejs.org/examples/webgl_materials_lightmap

Creating a light map is not that easy since you need a tool like Blender to bake the lighting of a scene into a texture. However, there are tutorials online that explain the steps of this process.

2 Likes