把 br3ak 的 PNG，做成能旋轉的 3D Logo

我把一張 br3ak Logo 的 PNG 交給 Codex，要求它做出可以轉到背面的 3D 模型。原圖是黑底、白色立體字，最難忽略的就是中間那個往左下延伸的「3」。如果字形跑掉，就算光打得漂亮，也會變成另一個 Logo。

上面的動態圖是從這次完成的模型逐格擷取。你可以先打開互動展示頁，左右拖曳，看看正面、側面和背面，再回來讀這次怎麼做。

br3ak｜破三

br3ak｜破三，是我正在籌備、以 Breaking 為主題的新品牌。

把 Breaking 精神帶給非 Breaking 圈層的人。

三核心

BR3AK THE ORDINARY.

打破平凡

打破刻板印象、既有框架與圈層限制，讓 Breaking 走進更大的世界。

IMMERSE THE FLOW.

沉浸極致

持續投入、練習與突破，追求技術、身體、音樂與意識融合的極致 Flow。

SHARE THE CYPHER.

知識共享

把 Breaking 的文化、經驗與知識放回 Cypher 中流動，分享給下一代，帶動持續成長。

這次使用的完整提示詞

附上 Logo 參考圖後，可以複製以下提示詞使用：

我提供了一張 br3ak 3D Logo 的 PNG 參考圖。請根據圖片重建真正可 360° 旋轉的 3D Logo，而不是用圖片做假 3D。

第一階段先從圖片辨識並重建乾淨的正面 SVG 輪廓，盡可能準確保留 b、r、特殊數字 3、a、k 的形狀、比例與字距。

接著使用 React + React Three Fiber + Three.js，把 SVG 轉成真正的 ExtrudeGeometry 3D Mesh。建立正面、背面與側面厚度，加入圓滑 Bevel，使外觀接近參考圖片。

材質使用白色、非金屬、略帶柔和反射的材質；背景純黑。建立 Studio Lighting，使正面保持明亮，側面能看見柔和灰色陰影與立體厚度。

加入滑鼠與手機觸控 360° 水平旋轉，並提供緩慢自動旋轉。避免使用 2D 圖片假裝成立體效果。

請啟動本機網頁並自行查看渲染結果，對照參考圖片反覆調整字形、厚度、Bevel、材質、Camera 與 Lighting。

程式架構請保持簡單，Logo 做成獨立可重複使用的 React Three Fiber component。完成 Web 版本後，再提供輸出為 GLB 3D Asset 的方式。

先把字形留下來

這次沒有直接套現成字型。我請 Codex 先辨識 b、r、3、a、k 的輪廓，用 Bézier 路徑重建成 SVG，盡量保留字腹、細襯線與字距。b 和 a 中間的空洞也要保留下來，後面才能做出真正的內側壁。

先做 SVG，讓檢查變得單純。我可以暫時把燈光和材質放到一邊，只看五個字排起來是否接近原圖。尤其是「3」的上緣、斜線和長尾，這幾個地方的比例一變，整組字的感覺就會跟著變。

這份 SVG 是依圖片手工重建的輪廓，還不是原始品牌向量。單張 PNG 看不到的背面與深度，也只能做合理估算；這個限制要跟成果一起留下來。

第一版能轉，但立體感還不夠

接下來用 React Three Fiber 和 Three.js，把 SVG 輪廓交給 ExtrudeGeometry。五個字元各自成為 Mesh，有前後蓋面、側壁與圓角。模型沒有使用那張 PNG 當貼圖。

第一版正面已經能看出 br3ak 的形狀，但倒角偏細，側邊陰影也太弱，畫面看起來仍然很平。後來把預設厚度從 24 調到 36、倒角從 3 調到 5，再調整視角，讓下緣露出一點灰色厚度。這些數字是沿用 SVG 座標的相對單位，不是毫米。

材質維持白色、金屬度 0，粗糙度設為 0.3。燈光也調了幾輪：正面要夠亮，內孔和側壁又得保留灰階，才能讀出圓角。全部打亮時，反而看不清形狀。

同時測試兩個工具，也會互相踩到檔案

這次我也在用 Claude Code 做同一個題目。做到一半，Codex 發現展示頁的檔案被另一個來源改寫，先停下來確認。這個插曲很實際：兩個工具如果都在同一個目錄改同一個元件，很容易把彼此的工作蓋掉。

後來把 Codex 的頁面、元件和 SVG 分開，放在 /br3ak-codex。這篇記錄的是這個版本；Claude Code 的測試另外保留，這次沒有做模型能力的勝負比較。

能拖曳之後，還有一個切換問題

滑鼠拖曳可以轉到側面與背面，頁面也提供自動旋轉、正面重設，以及厚度、圓角、粗糙度的調整。我們檢查了桌機和手機寬度下的版面；手機操作則沿用 Pointer Events 的水平拖曳。

最後驗證時又發現，從 SVG 輪廓切回 3D，自動旋轉偶爾沒有接著跑。修正後，開啟自動旋轉且舞台可見時持續更新，暫停或隱藏時改成需要更新才渲染。再切一次 SVG 與 3D，確認角度真的持續增加，才算把這段互動收好。

網站裡這些小問題，通常要自己操作一遍才會碰到。只看正面的截圖，檢查不到這裡。

留下一個可以拿走的 3D 資產

最後除了網頁，也把同一份幾何匯出成 GLB，並重新載入檢查。預設版本有 5 個封閉 Mesh、37,564 個三角形；前面、背面和側壁都在，沒有圖片貼圖。檢查也確認了朝外的三角面方向和非零厚度。這是網格檢查，還不等於已完成製造用途的全面驗證。

網頁右上角可以下載 GLB。調整外觀後再匯出，拿到的就是當下那組參數做出的模型。你也可以直接下載這次的 SVG 輪廓和預設 GLB。

這次留下來的做法很明確：先檢查字形，再看模型各個面，接著測互動，最後把匯出的檔案重新打開。想試一次的話，先拿一個有中空字母的簡單 Logo 開始；做到能轉到背面，再回頭調燈光。這樣比較容易知道，眼前的問題究竟出在輪廓、幾何，還是呈現方式。