برچسب: Process

Back in November 2024, I shared a post on X about a tool I was building to help visualize kitchen remodels. The response from the Three.js community was overwhelmingly positive. The demo showed how procedural rendering techniques—often used in games—can be applied to real-world use cases like designing and rendering an entire kitchen in under 60 seconds.

In this article, I’ll walk through the process and thinking behind building this kind of procedural 3D kitchen design tool using vanilla Three.js and TypeScript—from drawing walls and defining cabinet segments to auto-generating full kitchen layouts. Along the way, I’ll share key technical choices, lessons learned, and ideas for where this could evolve next.

You can try out an interactive demo of the latest version here: https://kitchen-designer-demo.vercel.app/. (Tip: Press the “/” key to toggle between 2D and 3D views.)

Designing Room Layouts with Walls

To initiate our project, we begin with the wall drawing module. At a high level, this is akin to Figma’s pen tool, where the user can add one line segment at a time until a closed—or open-ended—polygon is complete on an infinite 2D canvas. In our build, each line segment represents a single wall as a 2D plane from coordinate A to coordinate B, while the complete polygon outlines the perimeter envelope of a room.

1. We begin by capturing the [X, Z] coordinates (with Y oriented upwards) of the user’s initial click on the infinite floor plane. This 2D point is obtained via Three.js’s built-in raycaster for intersection detection, establishing Point A.
2. As the user hovers the cursor over a new spot on the floor, we apply the same intersection logic to determine a temporary Point B. During this movement, a preview line segment appears, connecting the fixed Point A to the dynamic Point B for visual feedback.
3. Upon the user’s second click to confirm Point B, we append the line segment (defined by Points A and B) to an array of segments. The former Point B instantly becomes the new Point A, allowing us to continue the drawing process with additional line segments.

Here is a simplified code snippet demonstrating a basic 2D pen-draw tool using Three.js:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10); // Position camera above the floor looking down
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create an infinite floor plane for raycasting
const floorGeometry = new THREE.PlaneGeometry(100, 100);
const floorMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc, side: THREE.DoubleSide });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2; // Lay flat on XZ plane
scene.add(floor);

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let points: THREE.Vector3[] = []; // i.e. wall endpoints
let tempLine: THREE.Line | null = null;
const walls: THREE.Line[] = [];

function getFloorIntersection(event: MouseEvent): THREE.Vector3 | null {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(floor);
  if (intersects.length > 0) {
    // Round to simplify coordinates (optional for cleaner drawing)
    const point = intersects[0].point;
    point.x = Math.round(point.x);
    point.z = Math.round(point.z);
    point.y = 0; // Ensure on floor plane
    return point;
  }
  return null;
}

// Update temporary line preview
function onMouseMove(event: MouseEvent) {
  const point = getFloorIntersection(event);
  if (point && points.length > 0) {
    // Remove old temp line if exists
    if (tempLine) {
      scene.remove(tempLine);
      tempLine = null;
    }
    // Create new temp line from last point to current hover
    const geometry = new THREE.BufferGeometry().setFromPoints([points[points.length - 1], point]);
    const material = new THREE.LineBasicMaterial({ color: 0x0000ff }); // Blue for temp
    tempLine = new THREE.Line(geometry, material);
    scene.add(tempLine);
  }
}

// Add a new point and draw permanent wall segment
function onMouseDown(event: MouseEvent) {
  if (event.button !== 0) return; // Left click only
  const point = getFloorIntersection(event);
  if (point) {
    points.push(point);
    if (points.length > 1) {
      // Draw permanent wall line from previous to current point
      const geometry = new THREE.BufferGeometry().setFromPoints([points[points.length - 2], points[points.length - 1]]);
      const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); // Red for permanent
      const wall = new THREE.Line(geometry, material);
      scene.add(wall);
      walls.push(wall);
    }
    // Remove temp line after click
    if (tempLine) {
      scene.remove(tempLine);
      tempLine = null;
    }
  }
}

// Add event listeners
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mousedown', onMouseDown);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

The above code snippet is a very basic 2D pen tool, and yet this information is enough to generate an entire room instance. For reference: not only does each line segment represent a wall (2D plane), but the set of accumulated points can also be used to auto-generate the room’s floor mesh, and likewise the ceiling mesh (the inverse of the floor mesh).

In order to view the planes representing the walls in 3D, one can transform each THREE.Line into a custom Wall class object, which contains both a line (for orthogonal 2D “floor plan” view) and a 2D inward-facing plane (for perspective 3D “room” view). To build this class:

class Wall extends THREE.Group {
  constructor(length: number, height: number = 96, thickness: number = 4) {
    super();

    // 2D line for top view, along the x-axis
    const lineGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(length, 0, 0),
    ]);
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
    const line = new THREE.Line(lineGeometry, lineMaterial);
    this.add(line);

    // 3D wall as a box for thickness
    const wallGeometry = new THREE.BoxGeometry(length, height, thickness);
    const wallMaterial = new THREE.MeshBasicMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });
    const wall = new THREE.Mesh(wallGeometry, wallMaterial);
    wall.position.set(length / 2, height / 2, 0);
    this.add(wall);
  }
}

We can now update the wall draw module to utilize this newly created Wall object:

// Update our variables
let tempWall: Wall | null = null;
const walls: Wall[] = [];

// Replace line creation in onMouseDown with
if (points.length > 1) {
  const start = points[points.length - 2];
  const end = points[points.length - 1];
  const direction = end.clone().sub(start);
  const length = direction.length();
  const wall = new Wall(length);
  wall.position.copy(start);
  wall.rotation.y = Math.atan2(direction.z, direction.x); // Align along direction (assuming CCW for inward facing)
  scene.add(wall);
  walls.push(wall);
}

Upon adding the floor and ceiling meshes, we can further transform our wall module into a room generation module. To recap what we have just created: by adding walls one by one, we have given the user the ability to create full rooms with walls, floors, and ceilings—all of which can be adjusted later in the scene.

Generating Cabinets with Procedural Modeling

Rather than taking several minutes to add the cabinets on a case-by-case basis—for example, like with IKEA’s 3D kitchen builder—it’s possible to add all the cabinets at once via a single user action. One method to employ here is to allow the user to draw high-level cabinet line segments, in the same manner as the wall draw module.

In this module, each cabinet segment will transform into a linear row of base and wall cabinets, along with a parametrically generated countertop mesh on top of the base cabinets. As the user creates the segments, we can automatically populate this line segment with pre-made 3D cabinet meshes in meshing software like Blender. Ultimately, each cabinet’s width, depth, and height parameters will be fixed, while the width of the last cabinet can be dynamic to fill the remaining space. We use a cabinet filler piece mesh here—a regular plank, with its scale-X parameter stretched or compressed as needed.

Creating the Cabinet Line Segments

Here we will construct a dedicated cabinet module, with the aforementioned cabinet line segment logic. This process is very similar to the wall drawing mechanism, where users can draw straight lines on the floor plane using mouse clicks to define both start and end points. Unlike walls, which can be represented by simple thin lines, cabinet line segments need to account for a standard depth of 24 inches to represent the base cabinets’ footprint. These segments do not require closing-polygon logic, as they can be standalone rows or L-shapes, as is common in most kitchen layouts.

We can further improve the user experience by incorporating snapping functionality, where the endpoints of a cabinet line segment automatically align to nearby wall endpoints or wall intersections, if within a certain threshold (e.g., 4 inches). This ensures cabinets fit snugly against walls without requiring manual precision. For simplicity, we’ll outline the snapping logic in code but focus on the core drawing functionality.

We can start by defining the CabinetSegment class. Like the walls, this should be its own class, as we will later add the auto-populating 3D cabinet models.

class CabinetSegment extends THREE.Group {
  public length: number;

  constructor(length: number, height: number = 96, depth: number = 24, color: number = 0xff0000) {
    super();
    this.length = length;
    const geometry = new THREE.BoxGeometry(length, height, depth);
    const material = new THREE.MeshBasicMaterial({ color, wireframe: true });
    const box = new THREE.Mesh(geometry, material);
    box.position.set(length / 2, height / 2, depth / 2); // Shift so depth spans 0 to depth (inward)
    this.add(box);
  }
}

Once we have the cabinet segment, we can use it in a manner very similar to the wall line segments:

let cabinetPoints: THREE.Vector3[] = [];
let tempCabinet: CabinetSegment | null = null;
const cabinetSegments: CabinetSegment[] = [];
const CABINET_DEPTH = 24; // everything in inches
const CABINET_SEGMENT_HEIGHT = 96; // i.e. both wall & base cabinets -> group should extend to ceiling
const SNAPPING_DISTANCE = 4;

function getSnappedPoint(point: THREE.Vector3): THREE.Vector3 {
  // Simple snapping: check against existing wall points (wallPoints array from wall module)
  for (const wallPoint of wallPoints) {
    if (point.distanceTo(wallPoint) < SNAPPING_DISTANCE) return wallPoint;
  }
  return point;
}

// Update temporary cabinet preview
function onMouseMoveCabinet(event: MouseEvent) {
  const point = getFloorIntersection(event);
  if (point && cabinetPoints.length > 0) {
    const snappedPoint = getSnappedPoint(point);
    if (tempCabinet) {
      scene.remove(tempCabinet);
      tempCabinet = null;
    }
    const start = cabinetPoints[cabinetPoints.length - 1];
    const direction = snappedPoint.clone().sub(start);
    const length = direction.length();
    if (length > 0) {
      tempCabinet = new CabinetSegment(length, CABINET_SEGMENT_HEIGHT, CABINET_DEPTH, 0x0000ff); // Blue for temp
      tempCabinet.position.copy(start);
      tempCabinet.rotation.y = Math.atan2(direction.z, direction.x);
      scene.add(tempCabinet);
    }
  }
}

// Add a new point and draw permanent cabinet segment
function onMouseDownCabinet(event: MouseEvent) {
  if (event.button !== 0) return;
  const point = getFloorIntersection(event);
  if (point) {
    const snappedPoint = getSnappedPoint(point);
    cabinetPoints.push(snappedPoint);
    if (cabinetPoints.length > 1) {
      const start = cabinetPoints[cabinetPoints.length - 2];
      const end = cabinetPoints[cabinetPoints.length - 1];
      const direction = end.clone().sub(start);
      const length = direction.length();
      if (length > 0) {
        const segment = new CabinetSegment(length, CABINET_SEGMENT_HEIGHT, CABINET_DEPTH, 0xff0000); // Red for permanent
        segment.position.copy(start);
        segment.rotation.y = Math.atan2(direction.z, direction.x);
        scene.add(segment);
        cabinetSegments.push(segment);
      }
    }
    if (tempCabinet) {
      scene.remove(tempCabinet);
      tempCabinet = null;
    }
  }
}

// Add separate event listeners for cabinet mode (e.g., toggled via UI button)
window.addEventListener('mousemove', onMouseMoveCabinet);
window.addEventListener('mousedown', onMouseDownCabinet);

Auto-Populating the Line Segments with Live Cabinet Models

Once the cabinet line segments are defined, we can procedurally populate them with detailed components. This involves dividing each segment vertically into three layers: base cabinets at the bottom, countertops in the middle, and wall cabinets above. For the base and wall cabinets, we’ll use an optimization function to divide the segment’s length into standard widths (preferring 30-inch cabinets), with any remainder filled using the filler piece mentioned above. Countertops are even simpler—they form a single continuous slab stretching the full length of the segment.

The base cabinets are set to 24 inches deep and 34.5 inches high. Countertops add 1.5 inches in height and extend to 25.5 inches deep (including a 1.5-inch overhang). Wall cabinets start at 54 inches high (18 inches above the countertop), measure 12 inches deep, and are 30 inches tall. After generating these placeholder bounding boxes, we can replace them with preloaded 3D models from Blender using a loading function (e.g., via GLTFLoader).

// Constants in inches
const BASE_HEIGHT = 34.5;
const COUNTER_HEIGHT = 1.5;
const WALL_HEIGHT = 30;
const WALL_START_Y = 54;
const BASE_DEPTH = 24;
const COUNTER_DEPTH = 25.5;
const WALL_DEPTH = 12;

const DEFAULT_MODEL_WIDTH = 30;

// Filler-piece information
const FILLER_PIECE_FALLBACK_PATH = 'models/filler_piece.glb'
const FILLER_PIECE_WIDTH = 3;
const FILLER_PIECE_HEIGHT = 12;
const FILLER_PIECE_DEPTH = 24;

To handle individual cabinets, we’ll create a simple Cabinet class that manages the placeholder and model loading.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

class Cabinet extends THREE.Group {
  constructor(width: number, height: number, depth: number, modelPath: string, color: number) {
    super();

    // Placeholder box
    const geometry = new THREE.BoxGeometry(width, height, depth);
    const material = new THREE.MeshBasicMaterial({ color });
    const placeholder = new THREE.Mesh(geometry, material);
    this.add(placeholder);


    // Load and replace with model async

    // Case: Non-standard width -> use filler piece
    if (width < DEFAULT_MODEL_WIDTH) {
      loader.load(FILLER_PIECE_FALLBACK_PATH, (gltf) => {
        const model = gltf.scene;
        model.scale.set(
          width / FILLER_PIECE_WIDTH,
          height / FILLER_PIECE_HEIGHT,
          depth / FILLER_PIECE_DEPTH,
        );
        this.add(model);
        this.remove(placeholder);
      });
    }

    loader.load(modelPath, (gltf) => {
      const model = gltf.scene;
      model.scale.set(width / DEFAULT_MODEL_WIDTH, 1, 1); // Scale width
      this.add(model);
      this.remove(placeholder);
    });
  }
}

Then, we can add a populate method to the existing CabinetSegment class:

function splitIntoCabinets(width: number): number[] {
  const cabinets = [];
  // Preferred width
  while (width >= DEFAULT_MODEL_WIDTH) {
    cabinets.push(DEFAULT_MODEL_WIDTH);
    width -= DEFAULT_MODEL_WIDTH;
  }
  if (width > 0) {
    cabinets.push(width); // Custom empty slot
  }
  return cabinets;
}

class CabinetSegment extends THREE.Group {
  // ... (existing constructor and properties)

  populate() {
    // Remove placeholder line and box
    while (this.children.length > 0) {
      this.remove(this.children[0]);
    }

    let offset = 0;
    const widths = splitIntoCabinets(this.length);

    // Base cabinets
    widths.forEach((width) => {
      const baseCab = new Cabinet(width, BASE_HEIGHT, BASE_DEPTH, 'models/base_cabinet.glb', 0x8b4513);
      baseCab.position.set(offset + width / 2, BASE_HEIGHT / 2, BASE_DEPTH / 2);
      this.add(baseCab);
      offset += width;
    });

    // Countertop (single slab, no model)
    const counterGeometry = new THREE.BoxGeometry(this.length, COUNTER_HEIGHT, COUNTER_DEPTH);
    const counterMaterial = new THREE.MeshBasicMaterial({ color: 0xa9a9a9 });
    const counter = new THREE.Mesh(counterGeometry, counterMaterial);
    counter.position.set(this.length / 2, BASE_HEIGHT + COUNTER_HEIGHT / 2, COUNTER_DEPTH / 2);
    this.add(counter);

    // Wall cabinets
    offset = 0;
    widths.forEach((width) => {
      const wallCab = new Cabinet(width, WALL_HEIGHT, WALL_DEPTH, 'models/wall_cabinet.glb', 0x4b0082);
      wallCab.position.set(offset + width / 2, WALL_START_Y + WALL_HEIGHT / 2, WALL_DEPTH / 2);
      this.add(wallCab);
      offset += width;
    });
  }
}

// Call for each cabinetSegment after drawing
cabinetSegments.forEach((segment) => segment.populate());

Further Improvements & Optimizations

At this point, we should have the foundational elements of room and cabinet creation logic fully in place. In order to take this project from a rudimentary segment-drawing app into the practical realm—along with dynamic cabinets, multiple realistic material options, and varying real appliance meshes—we can further enhance the user experience through several targeted refinements:

• We can implement a detection mechanism to determine if a cabinet line segment is in contact with a wall line segment.
  • For cabinet rows that run parallel to walls, we can automatically incorporate a backsplash in the space between the wall cabinets and the countertop surface.
  • For cabinet segments not adjacent to walls, we can remove the upper wall cabinets and extend the countertop by an additional 15 inches, aligning with standard practices for kitchen islands or peninsulas.
• We can introduce drag-and-drop functionality for appliances, each with predefined widths, allowing users to position them along the line segment. This integration will instruct our cabinet-splitting algorithm to exclude those areas from dynamic cabinet generation.
• Additionally, we can give users more flexibility by enabling the swapping of one appliance with another, applying different textures to our 3D models, and adjusting default dimensions—such as wall cabinet depth or countertop overhang—to suit specific preferences.

All these core components lead us to a comprehensive, interactive application that enables the rapid rendering of a complete kitchen: cabinets, countertops, and appliances, in a fully interactive, user-driven experience.

The aim of this project is to demonstrate that complex 3D tasks can be distilled down to simple user actions. It is fully possible to take the high-dimensional complexity of 3D tooling—with seemingly limitless controls—and encode these complexities into low-dimensional, easily adjustable parameters. Whether the developer chooses to expose these parameters to the user or an LLM, the end result is that historically complicated 3D processes can become simple, and thus the entire contents of a 3D scene can be fully transformed with only a few parameters.

If you find this type of development interesting, have any great ideas, or would love to contribute to the evolution of this product, I strongly welcome you to reach out to me via email. I firmly believe that only recently has it become possible to build home design software that is so wickedly fast and intuitive that any person—regardless of architectural merit—will be able to design their own single-family home in less than 5 minutes via a web app, while fully adhering to local zoning, architectural, and design requirements. All the infrastructure necessary to accomplish this already exists; all it takes is a team of crazy, ambitious developers looking to change the standard of architectural home design.