Wawa Sensei logo
Back to videos

I Had to Cut Real Holes Through 3D Walls - Here's How (Three.js)

Overview

What if you could design your house directly in your browser, just like in The Sims?

That’s exactly what Pascal is building: a browser-based 3D home editor that doesn’t just look good, but generates real, usable building data through APIs.

This project opens the door to powerful use cases:

  • Realtors walking clients through properties remotely

  • Contractors planning renovations visually

  • Homeowners redesigning their space before touching a single tool

And all of this runs entirely in the browser using modern 3D web technologies.

A few weeks ago, I joined the project as their Three.js specialist. Since we’re still in early development, I decided to document the process as a multi-part devlog tutorial series, sharing the real technical challenges we face—and how we solve them in production.

The First Real Geometry Challenge

In theory, adding doors and windows to a 3D wall sounds simple.

In practice?

It’s one of the first real roadblocks when building a serious 3D editor.

You can place a window perfectly on a wall…

but the wall is still solid.

Increasing the thickness of the window doesn’t solve the problem—we need to actually see through the wall. That means the geometry itself must be modified.

And not just with a basic rectangle:

  • Windows can be circular

  • Doors can have complex shapes

  • Custom 3D models must be respected

To solve this properly, we need to cut real holes through the wall geometry, following the exact shape of the object.

This is where Constructive Solid Geometry (CSG) comes in.

This episode focuses on:

  • Understanding CSG concepts

  • Performing boolean subtractions on walls

  • Supporting circular and custom-shaped windows

  • Applying CSG to imported 3D models

  • Polishing the resulting geometry so it’s clean and usable

This devlog marks the start of a new series where I openly share the real challenges and solutions behind production 3D apps.

Resources/Tech Stack

#threejs #js #devlog

Need help with this tutorial? Join our Discord community!