3D architecture in three.js

Hi. Do you know the learning resources on architecture in three.js? For example how to make a house and lighting inside at night.

1 Like

Hello,

Comes with interactive examples and explanations of lighting, materials, meshes, and scenes.

Create into blender and import into three.js.

1 Like

.. and to extend on that.. look for arch-viz tutorials for blender / cad.. i’m think there are a lot more applicable resources than the pure threejs route.
Once you’ve built your architecture.. the steps to get it into threejs are a slightly different skillset… reducing triangle count, baking lights/materials, leveraging instancing…

1 Like

Hi, yes, there are learning paths that focus on architectural spaces using web based 3D technologies.

If your goal is to create a house scene with convincing interior lighting at night, it is often better to think beyond real time lights and shadows. For architectural visualization, especially on the web, using pre rendered lightmaps for day and night usually produces higher visual quality and much better performance.

Instead of relying on dynamic lighting in three.js, lighting and shadows can be baked into textures using a modeling or rendering tool. You can prepare separate lightmaps for daytime and nighttime scenarios and switch between them in the viewer. This approach produces realistic global illumination, softer shadows, and stable lighting while keeping the experience smooth and responsive.

One resource that explains this workflow in a structured way is the SketchUp to Virtual Experience Course Book. It focuses on transforming architectural models into interactive virtual environments that can be explored directly in a web browser. The material emphasizes spatial experience at human scale and practical techniques such as model preparation, texture baking, and clear presentation for design communication.

Here is an interactive real estate example using a baked lighting model:
https://theneoverse.web.app/#threeviewer&&suite

You can also explore another sample virtual environment here:
https://theneoverse.web.app/#threeviewer&&vistadistrict

The complete course book and reference material are available here:

This approach provides a solid foundation for creating high quality architectural scenes with realistic lighting while maintaining strong performance in real time web environments.