How is it possible to create this scene in three.js?

Hello three.js people!

I’m fairly new to three.js and currently struggling with bringing an Idea I have to the web.

While the model basically only consists of a couple of planes, I’m not sure how to create this kind of light-setting and materials - everything I tried turned out to look really cheap:

It frustrated me a little, but in the end, I understand that three.js is an art on its own. This is why my question is: Is there any three.js artist out there who has tips or advises for my case? Is it even possible to create a similar visual in three.js?

Thanks a lot in advance,
Niklas

Hello there and welcome to the forum!
Your geometry setup looks good. Have you tried something simple, like:
a) The walls & floor with a lit material (phong or standard probably) with a blue color
b) Point light behind the left wall (casting shadows)
c) ambient light to brighten the shadowed areas

Problem is, your source image is probably using raytracing (like blender’s cycles engine), which produces much nicer, softer lighting & shadows. That quality can be very hard to match with real-time rendering of THREE.
A lot also depends on your use case - if you need to only see this particular location with not much dynamism, then you can bake the lighting into a texture (in a 3D software, for example: Blender) and just load it into Three.js app. This will fail however if you need to move the light source, change its settings etc.

For realtime, I tried to recreate it on codepen following my steps mentioned above:

Link to Codepen

I’ve also added a directional light to help distinguish the right wall from the floor. Feel free to copy the code, play around with its settings and see what works best for you.
NOTE: DAT.gui is great for this sort of tinkering stuff, allowing you to make changes real-time without reloading.
Note 2: This is just a sketch to showcase an idea, and could be improved (for example by merging the walls into a single mesh)

Edit: Increasing the light’s intensity & range, as well as placing it al little further might be an improvement:

4 Likes

This is incredibly helpful! Thanks a lot!!

1 Like