實驗室

實驗、比較與實戰學習。

THREE.JS × FLOOR PLAN · INTERACTIVE SPACE LAB

平面圖，可以走進去嗎？

在兩種三房格局之間切換，拖拉家具、轉動視角，看一張平面圖怎麼變成可操作的 3D 空間。

開始佈置空間 ↗

GODOT × BFS · INTERACTIVE SOLVER LAB

這一關真的有解嗎？

親手推箱、逐層播放 BFS 搜尋、拿一步最佳提示，再看看 CI 怎麼替 100 關守住資料契約。

打開解題實驗室 ↗

BLENDER × THREE.JS · IMMERSIVE ESSAY

我為什麼不再讓 AI 一次把整個 App 做完

捲動穿過五個 3D 場景，看看我怎麼從「全部交給 AI」走到把最後的決定留給自己。

開始互動閱讀 ↗

OPENSTREETMAP × THREE.JS · SEEDED ARCADE RACE

在真實信義區，隨機跑一場街道賽

道路、灰盒建物與高程預生成自開放資料；每個 seed 都會從道路網組出封閉路線，再和三名 AI 對手比三圈。

開始街道賽 ↗

OPENSTREETMAP × BLENDER × THREE.JS · REAL CITY

Midnight Run：跑一圈真實的信義區

賽道不是畫出來的。整條路線來自 OpenStreetMap 快照，經 Blender 產生城市，最後是瀏覽器裡 1.3MB 的 GLB。

開始夜跑 ↗

FREE STARTER · VITE · TYPESCRIPT · MIT

可直接複製的 Three.js 捲動文章

先在線上玩完整互動 Demo，再用 GitHub Template 或 ZIP 帶走包含行動版、reduced motion 與 WebGL fallback 的原始碼。

開啟 Starter →

Behind the scenes

這個 3D 網頁是怎麼做的？

Three.js從 WebGL 到捲動式 3D 文章Blender從 3D 創作到 Headless GLB 匯出OpenStreetMap → Blender → Three.js把真實城市變成 3D 場景的完整管線，附可下載 starter