Achieving realistic ambience in architectural Three.js scenes

Questions
, , , , ,
1

I’m working on an architectural / interior visualization project in Three.js and I’m aiming for a realistic, atmospheric look similar to this example by Anderson Mancini:

https://planpoint-house.vercel.app/

I’m not looking for project-specific secrets — more interested in the general Three.js techniques and workflow used to achieve this kind of ambience.

A few questions I have:

  1. Asset creation
  • Is furniture and interior geometry typically modeled in Blender (or another DCC) and exported as GLB/GLTF?
  • Or are asset libraries commonly used and then optimized for web?
  1. Lighting & mood
  • Is most of the realism coming from HDRI environment lighting and baked lightmaps, or from real-time lights in Three.js?
  • Any best practices for achieving soft, natural interior lighting?
  1. Materials & rendering
  • How much does post-processing (tone mapping, color grading, AO, bloom, etc.) contributes versus high-quality PBR materials alone?
  • Any commonly recommended toneMapping / exposure settings for interior scenes?
  1. Workflow & performance
  • Typical pipeline from Blender → GLB → Three.js for architectural interiors?
  • Key performance considerations when working with detailed interior assets?

I’d really appreciate any insights or best practices from people who’ve built similar archviz experiences with Three.js.

2

Most effective is to bake everything, then display them in three with emissive/unlit materials without real time shadows. Minimal amount of transparency and reflective surfaces. Especially if you wish to run this on VR and mobile. Your example also use custom DOF, AA, Bloom, when the view is stabilised. And if you clever you can render the whole scene without any light, only HDR.

But why doing all this? Because all memory left is being used to store/display the largest textures and meshes you can fit inside a browser (webGL shader limited to 4092px down to 2048px on some devices). webGPU is not an option if you plan to allow any customers and devices to run it with their default settings.

TLDR: all the work is mostly done outside three, on your 3D modeling app.

3

To sanity-check my understanding: does a site like HomeStyler operate on the same principle you’re describing here?

Meaning: most of the visual fidelity comes from assets prepared and baked in a DCC tool (lighting, shadows, texture detail), with the browser mainly acting as a lightweight viewer using unlit/emissive materials and minimal real-time lighting?

My longer-term idea isn’t to just load a library of fixed GLTF house models, but to allow users to manipulate the layout — for example, making a room larger and having the house adapt accordingly.

Given that kind of flexibility, does the “bake everything outside Three.js” approach still apply, or does it start to break down once geometry becomes user-modifiable at runtime?

4

I found another example and he said it was done with real time lighting - https://www.linkedin.com/posts/ugcPost-7384617413767630848-97H5?utm_source=share&utm_medium=member_desktop&rcm=ACoAADHvKRMBtxInDhDmSIKj4qOEci16zxE8Nx4

5

It all really depends on your use case.

You can for example modify the layout, send it to some backend to rebake everything. You could do it in in a different thread. You could have an artist manually bake everything, but then that doesnt scale well.

What about baking normal maps? If you want light weight assets that load fast, that would also be done manually. Or not, in which case youre loading really heavy models.