img2threejs 實測：丟一張圖片給 Codex，真的能做成 Three.js 3D 模型嗎？

前言

img2threejs 這個名字很直白：給 Agent 一張參考圖片，讓它用程式重建成可以在瀏覽器裡操作的 Three.js 3D 模型。

它不是把照片直接轉成 Mesh，也不是攝影測量。Agent 會先拆解圖片裡的輪廓、零件、材質與細節，再用 Three.js 的幾何圖形、材質和程式碼把物件重新做出來。理論上還會經過 blockout、結構、外型、材質、燈光、互動與最佳化等階段。

我這次用 GPT-5.6 SOL，推理強度選 medium。前面先拿 F1 賽車這種複雜物件測，結果很直接：翻車。曲面、車身比例、輪胎與空力套件只要幾個地方沒抓準，最後看起來就不像同一台車。

後來我換成結構比較簡單的紅白機手把，只跑一次完整任務，沒有再叫 Agent 針對成品反覆人工精修。這次至少有做出手把外殼、十字鍵、Select／Start、A／B 按鈕和電線，也能切換視角、點選零件與打開爆炸圖。效果稱不上精緻，但拿來做粗略 Demo 已經可以接受。

這是我用 GPT-5.6 SOL、medium 推理跑出來的紅白機手把

這個差別很重要。img2threejs 不會從照片裡抽出一個現成模型，而是讓 Agent 觀察圖片，再產生一個 THREE.Group 工廠。模型本身由 primitive、程序材質和生成幾何組成，所以最後拿到的是程式碼，不是下載回來的 .glb 或 .obj。

官方流程會先判斷圖片是否適合重建，接著建立 detail inventory，把倒角、接縫、按鈕、刻字、材質差異等特徵列出來。之後再建立規格，分階段完成模型，每一個階段都應該拿瀏覽器截圖和參考圖比較。

這套流程最有意思的地方不是「AI 幫我畫出一個 3D 物件」，而是它連模型結構也想一起處理。零件有名稱、階層、pivot、socket 和 collider，理論上比較容易繼續做動畫、互動或拆解，而不是只有一坨看起來像的靜態 Mesh。

我一開始選錯題目，拿 F1 賽車去測。

F1 的辨識度不只來自車身輪廓。前翼、後翼、側箱、Halo、輪胎比例和各種空力曲面只要少一塊，整台車就會變成「看得出來是賽車，但不是照片裡那台」。這種物件對單張圖片也不友善，很多結構被遮住，Agent 只能猜。

紅白機手把就簡單很多。它的主體接近扁平長方體，正面零件也很清楚：

原始參考圖的輪廓與按鈕配置很清楚，適合做程序式重建

這次 Agent 有把主要按鈕做成獨立零件。A、B 鍵可以點擊，畫面也提供 Reference、Top、Front、Side 等視角。按下 Explode parts 後，外殼、面板和控制零件會分層拉開；再按一次就能組回去。

這些互動比單純輸出一張 3D 截圖更有價值，因為它真的能拿來錄一段 Demo，或繼續接進其他 Three.js 場景。

不過外型還是有明顯落差。我的成品外殼偏厚，按鍵高度和材質反光也沒有完全貼近參考圖，標籤位置只能算大致接近。若要拿去當正式遊戲資產或產品展示，我不會直接用這一版。

官方 Gallery 裡的 Glock-18、BMX、刀具、耳機和場景模型，完成度都比我這次跑出來的手把高。

我沒辦法從 README 判斷作者展示時用了哪個模型，也不知道每個案例實際修了幾輪，所以不能直接說差距來自模型能力。比較確定的是，官方流程本來就設計了逐階段比對與 self-correction；如果每一次畫面檢查後都繼續修輪廓、零件和材質，結果當然會比「丟一次任務，看到可以動就停」更完整。

我這次比較接近一般人第一次安裝後的使用方式：放一張圖、指定物件，讓 Agent 自己跑完。以這個前提來看，簡單物件有機會得到可用的雛形，複雜物件則很吃模型、參考圖、推理強度和後續修正次數。

官方安裝與原始碼都在 img2threejs GitHub。安裝本身確實很簡單，核心就是 git clone，不是「Geek Clone」。

目前 Codex 官方文件建議把個人 skill 放在 ~/.agents/skills。先建立資料夾，再把專案 clone 進去：

bash

mkdir -p ~/.agents/skills
git clone https://github.com/img2threejs/img2threejs.git \
  ~/.agents/skills/img2threejs

Codex 通常會自動偵測 skill 變更；如果清單裡沒看到 img2threejs，重新啟動 Codex。

之後把參考圖片拖進任務，直接指定 skill 和物件名稱即可：

text

$img2threejs 紅白機手把

也可以把要求寫得更明確：

text

$img2threejs
請依照這張參考圖重建成可在瀏覽器操作的 Three.js 模型。
先鎖定外殼比例、按鈕配置與電線方向。
完成後提供正面、俯視與爆炸視圖，並列出仍不符合參考圖的地方。

專案裡的驗證腳本只需要 Python 3.10 以上，不必另外安裝一堆 Python 套件。不過如果 Agent 同時幫你建立 Vite／Three.js 預覽專案，還是需要 Node.js 和 npm 來安裝前端相依套件與啟動瀏覽器預覽。

如果已經安裝過，更新可以直接拉最新版：

bash

git -C ~/.agents/skills/img2threejs pull

我會優先選輪廓清楚、零件分明、表面不用照片級還原的物件，例如：

先不要從 F1 賽車、真人、動物或高度依賴細緻曲面的消費性電子產品開始。不是完全不能做，而是單張圖片藏掉的資訊太多，而且外型只要偏一點就很明顯。

參考圖也會直接影響結果。乾淨背景、主體完整、解析度夠高，再補正面、側面和背面，成功率會比只丟一張斜角照片高很多。

如果期待它把任何照片一鍵變成可以直接上線的 3D 資產，我這次的答案是否定的。

如果需求是快速做出一個可旋轉、可點擊、能拆解的 Three.js 雛形，它就有意思了。紅白機手把這種簡單物件，雖然細節和材質還不到精緻，但已經足以錄 Demo、確認互動方向，或當作後續人工調整的起點。

我不會用這次結果證明它能取代 3D 建模，也不會因為 F1 翻車就說它完全沒用。至少目前看起來，它比較像「讓 Agent 幫忙搭出程序式 3D 初稿」的工具；物件越簡單，這個初稿越可能省到時間。