Lab

Experiments, comparisons, and hands-on learning in the wild.

A floor plan turned into a furnished 3D layout

THREE.JS × DWG / DXF / PDF / IMAGE · INTERACTIVE SPACE LAB

Can a floor plan become a place?

Upload a .dwg / .dxf file or a floor plan image to build a 3D space. Then add furniture at real sizes and test the flow.

Start arranging the space ↗
Raster floor plan on the left, DXF double-line walls on the right

RASTER TO CAD · PNG / JPG → DXF & 3D

Floor Plan PNG / JPG to CAD (DXF) Vectorizer

Convert raster floor plan images into layered AutoCAD .dxf vector files with 2-point millimeter calibration, or launch directly in the 3D simulator.

Open PNG-to-CAD Studio ↗

PING CALCULATOR · CM / M² / 台尺 → 坪

Ping calculator: cm and m² to ping

1 ping ≈ 3.3058 m². Enter room sizes to get ping, add up several rooms, or import the outline from the 3D layout tool.

Calculate ping ↗

GODOT × BFS · INTERACTIVE SOLVER LAB

Is this level actually solvable?

Push the box, play BFS layer by layer, take one optimal hint, and see how CI guards a 100-level data contract.

Open the solver lab ↗

BLENDER × THREE.JS · IMMERSIVE ESSAY

Why I stopped asking AI to build the whole app

Scroll through five 3D scenes and follow my shift from handing everything to AI to keeping the final decision.

Start the interactive essay ↗

OPENSTREETMAP × THREE.JS · SEEDED ARCADE RACE

Race a generated circuit through real Xinyi streets

Roads, buildings, and elevation come from open data. Each seed builds a closed circuit from the street graph for a three-lap race against three AI rivals.

Start the street race ↗

OPENSTREETMAP × BLENDER × THREE.JS · REAL CITY

Midnight Run: a real lap of Taipei Xinyi

The track was not drawn. The route comes from an OpenStreetMap snapshot, the city is generated in Blender, and what ships is a 1.3 MB GLB.

Start the night run ↗

FREE STARTER · VITE · TYPESCRIPT · MIT

A copyable Three.js scroll article

Try the complete interactive demo, then take the source through GitHub Template or ZIP—with mobile, reduced-motion, and WebGL fallbacks included.

Open the starter →

Behind the scenes

How was this 3D page made?