Live App

ArchiView

Browser-based floor plan editor with real-time 3D preview, first-person walkthrough mode, furniture placement, and dynamic environment lighting — all running client-side with Three.js and React.

React 19 Three.js TypeScript WebGL Floor Plans

↗ Launch App ⚙ How It Works ▧ Features

Year 2026

Type Web App

Status ● Live

001 Overview

ArchiView lets you draw rooms in 2D and instantly see them extruded into a navigable 3D space. Add doors, windows, and openings to walls, drop in furniture from a categorized library, then walk through your design in first-person mode. Environment controls let you adjust sun direction, intensity, and ambient lighting in real time — all running entirely in the browser with zero backend.

002 How It Works

2D Floor Plan Drawing

Click and drag on a grid canvas to draw rooms. Each room snaps to a 0.5m grid and can be resized, moved, or assigned a type — living room, bedroom, kitchen, bathroom, office, or hallway.

Wall Items

Place doors, windows, and openings on any wall. Each item auto-detects the nearest wall segment, snaps to position, and supports width, height, elevation, and swing direction controls.

Real-Time 3D Extrusion

Toggle to 3D view and the floor plan is extruded into geometry with proper wall thickness (0.2m), 2.8m ceiling height, and PBR materials. Three.js renders everything with shadows and ambient occlusion.

First-Person Walkthrough

Enter walkthrough mode to navigate your floor plan from eye level. WASD movement, mouse look, and adjustable FOV let you experience the space as if you were physically inside it.

Furniture Placement

Drop furniture from a categorized library — sofas, beds, tables, kitchen counters, bathroom fixtures. Each piece has accurate dimensions and rotates freely on the grid.

Environment Lighting

Control sun intensity, azimuth, elevation, and ambient light in real time. Shadows update dynamically so you can visualize how natural light affects each room throughout the day.

003 Features

8 Room Types

Standard, Living, Bedroom, Kitchen, Bathroom, Dining, Office, and Hallway — each with distinct color coding and accent for visual clarity in 2D and 3D views.

Undo / Redo History

Full state history with snapshot-based undo and redo. Every room placement, wall item addition, and furniture drop is recorded and reversible.

Properties Panel

Select any element to inspect and edit its properties — room dimensions, door swing direction, window elevation, furniture rotation. All changes update in real time.

Keyboard Shortcuts

Full shortcut system for power users — tool switching, view toggling, undo/redo, delete, and walkthrough entry. Shortcuts modal shows all available bindings.