用 Three.js 呈現我的房間

GPT-6 Astra 發佈了。還記得是 09/05 的早上，我半夜起來上廁所，隨手瞄了一些手機的時間與通知，發現 GPT-6 發佈了，官方還特別展示了它操作 Blender 的能力，於是我上完廁所馬上到電腦前嘗試做了 Demo，實現了之前一直很想做的專案—用自己的房間做自我介紹互動。

透過 Blender 作渲染以及 baked，房間的場景圖跟互動大約花了兩個小時有了初版。老實說這讓我相當吃驚，因為以往模型雖然支援多模態，但是要完整復現距離可以用來展示的水平還有很大落差，但現在是 One Shot 就有很不錯的效果了。接下來就是調整跟修改文案。

GPT-6 復現程度很高，對 3D 場景有很好的理解，咖啡的煙、matrix 動畫跟皺摺的 shader 都是我描述想要的效果後它幫我實現出來的。

另外一個嘗試是使用 TSL。TSL 是 Three.js 用來兼容 WebGPU 跟 WebGL 的語法，寫法上也比 Shader 跟 WebGPU 友善很多。TSL 會自行判斷瀏覽器是否支援 WebGPU 並 fallback 到 WebGL。他們的語法有類似的地方，所以對語言模型來說很好遷移。

這篇來寫一下我的作法，整體的架構大致上是：

• 將房間用 Blender 建模並事先烘焙光源、陰影到貼圖材質上
• 透過 Three.js 做視角切換、渲染模型、互動
• 搭配一些巧思，將場景裡面的物件設計可點擊

1. 拍照

第一步先拍照，我把我自己的房間拍下來，叫 codex 直接呼叫 Blender MCP，將我的房間建模。第一個版本長這樣：

整個房間的雛形有模有樣，而且 Scene 裡面的 Layer 也都做了完整的命名！所以人類要介入修改也很簡單。

再來是上色（Shading），一樣是透過 Blender MCP 達成，GPT-6 Astra 可以理解照片裡的顏色，我在根據自己的想法加了一些東西，像是書架上放了三個正方體，用來放社群媒體網站。

2. UV Unwrapping 與烘焙光源

場景建好後，為了要在網頁上渲染，還需要幾個步驟：

UV Unwrapping

在電腦上渲染 3D 物體，可以想像成把 2D 的材質（Texture）依照指定的方式貼到 3D 物體上，這個過程就叫 UV Wrapping。

像是把立體的正方體紙盒沿著邊緣剪開攤平成十字形平面，這個攤平的過程就是 Unwrapping；而把包裝紙包回紙盒上的對應關係，就是 Mapping / Wrapping。

舉例來說，這是我吉他的 UV Unwrapping。我的理解是，UV Unwrapping 是建模裡面很枯燥的步驟之一，但是搭配 AI 可以大幅簡化這件事。

不過在這邊也出現了我不懂的事，我無法判斷這樣的 UV Unwrapping 到底是好還是不好，我只知道最後呈現出來的效果還不錯。

烘焙光源

Three.js 有很多光源 API 可以動態計算光影，然而光影計算通常比較耗費效能，因此我在剛開始就有指示 AI 直接使用烘焙，而不要使用 Three.js 的動態光源。烘焙指的是將耗費效能的光影運算預先計算好，並直接畫在模型的材質貼圖（Texture）上的技術。

因為是事先計算好的，所以反而可以保留渲染軟體中比較真實的光照、反射與陰影。代價是由於光源、陰影是事先計算好的，沒辦法跟著物件一起移動。

3. 互動

接下來是如何與物件互動。要讓物件可以跟真實 I/O 互動，可以透過 Raycast，將滑鼠座標轉換後判定是否有觸碰到物件，所以房間裡面的物件我都有另外建立 Mesh。偵測本身的邏輯也是由 AI 撰寫的，我只有叫它要使用 Three.js 的 API 做偵測。

接下來是我自己加入的細節，像是：

• Hover 時物件有位移，點擊時有音效
• 電腦螢幕的 Matrix animation 效果，裡面是日文唷！
• 咖啡杯的煙霧效果
• 稿紙的皺摺效果
• 點擊每個物件時的視角轉移
• 每個操作都可以透過鍵盤、索引引導完成
• 支援中、英、日三個語言
• 在切換視角的途中按下 ESC 時，動畫會從當前的進度做過渡而不是直接切回
• reduced motion：當開啟時煙霧、螢幕的動畫效果會自動停止
  • 在電腦或手機當中，有些人會開啟此設定以減少動畫帶來的刺激
• 手機版的互動與 UI 有特別調整過
• 吉他上有個 Fender 字樣

在加入這些細節時，我也發現雖然精緻度已經大幅提升，但小細節往往需要你自己補齊，不能只有一句「Make it better」。而這些細節要怎麼注意到呢？只能靠經驗累積來培養對細節的關注。

就像對 Blender 與 3D 建模一無所知的我，可能也漏掉了很多專業人士眼裡理所當然的小細節。

4. 成果

雖然 GPT-6 完成了大部分的工作，但打磨這些細節讓我仍然花了將近兩天才完成。包含裡面的文案，GPT 生成的文案真的是慘不忍睹。

以下擷取幾個段落：

做這類互動型作品集，最容易陷入的盲點是沈迷於視覺效果，而沒有做好傳遞資訊這件事。我最剛開始的初衷是想要分享自己的房間，並透過探索房間的物件，逐漸了解我是個怎樣的人，被什麼事物所吸引。

感想

這是我構思很久，卻一直沒有動手的專案。或許 Fable5.1 就已經有足夠能力做到，但我之前一直沒想過，直到 GPT-6 發布我才赫然想起，對耶！可以來實作這個專案了。

從 2024 年起，軟體開發產生很大變化，尤其在去年 2025 年六月左右，幾乎每次模型更新都會推翻之前的做事方法。

在這個 AI 演變如此迅速的時代，我曾經想過逃離，但現在想通了。即使不是身在 Frontier AI Labs 的開發者，能親身參與這波 AI 浪潮，見證、摸索，也在其中做出些什麼，這可是千載難逢的機會，輕易下船豈不可惜。

歡迎到 room.kalan.dev 來參觀我的房間唷！