如果想要知道基礎的網站怎麼上線，請參考這篇文章：如何透過 AI 快速上線您的網站，這邊只講 3D 的部分。
藍標傳奇的網站這種 3D 產品預覽不是什麼新東西，很多品牌大廠在自家網站上都有，到 2026 年算是 web 上滿成熟的一類體驗。不過大家詢問度蠻高，應該是很好奇這東西到底要花多少工才做得出來？
3D 模型建模
要做這種東西，第一個會碰到的問題是：那個 3D 瓶子要從哪來？
網路上蠻多現成的 3D 資源可以買，品質也都算非常好，但價格就是有點貴。像是 Yellow Images 這個做商品示意圖的網站，就有這些常見的鋁罐、啤酒瓶等等，不過要做 3D 即時預覽要買 145 鎂的高級授權，一個簡單的罐子就要花 4500 台幣，想想就可怕。
剛好之前玩 3D 列印的時候摸了一下怎麼用 Fusion 360 做工程建模。弄來了一些酒廠常用的瓶子，瓶身那段還算單純，畫個橫切面轉一圈就出現了。難的往往是瓶蓋跟拉環，不做看起來就不像罐子了。
畫一個罐子大概要兩三天，可能熟練後會比較快，不過因為所有細節都要進去的話，要花非常多時間去反覆修正。Fusion 360 是參數化的建模，不是 Blender 那種用捏的，大概是向量圖跟點陣圖的差別，所以有時候建模的順序跟參數不對，Fusion 會一直跳警告說畫不出來，這就跟 coding 要 debug 一樣可能會卡好幾天才會知道怎麼調。
我們當初就是要完整的呈現 3D 的精準度，這樣我們就可以把校稿的部分很大一部份搬到電腦上，不用反覆的打樣去確認效果。在這種標籤繞超過 180 度的狀況，就可以知道正面實際上會看到多少範圍。
Three.js 渲染
Three.js 是網頁上最常用的 3D 引擎，從 Fusion360 輸出 obj 檔後，這邊給 claude 接手，很快就可以變出一個 three.js 顯示的區域。
不過因為 Three.js 為了能夠及時的渲染，所以他在光追的部分就要做取捨，沒辦法去計算多重的反射與折射，只能靠單純的環境光反射貼圖跟單次射線計算物體重疊邏輯。
酒瓶這種透明的東西就很麻煩了，光線現在要通過 前酒標>前酒瓶>液體>後酒瓶>後酒標 五個東西，three.js 的限制是透明的東西裡面就不能再巢狀增加透明屬性了，這會變成說你只能透兩層，後面的東西會直接不渲染，只剩下前酒標跟前酒瓶跟不透明的液體。
好在 three.js 有個反向射線的計算可以使用，我們可以讓後面的酒標渲染到前面做出透明液體的假象。這會需要一點小技巧，但因為太複雜就不在這邊詳細解釋，簡單來說就是要讓他去計算酒標在瓶身的正面還是反面，去刪掉不需要計算的層數，讓他看起來像是從後面透回來。
至於材質跟光線的部分，PBR 材質負責讓表面物理表現對得上，像是玻璃外層會比較黑要調散射度，還有鋁罐要調金屬度之類的。那另外光滑的東西需要有環境光才會看起來有反射的樣子，這邊就有放幾組 HDRI 做測試，不同光源反射渲染出來的樣子都不太一樣，所以可以看得出是內室外的效果。
最後是 UV 貼圖的部分，這裏是有分兩個路線，貼紙跟熱縮膜。貼紙很好理解，就是在空間中給個多的幾何曲面然後把 UV 貼上去而已。熱縮的話則是要叫 claude 把罐子本身的曲線重新計算一遍，才不會破圖。這邊我們還寫了一個後台小工具來做精確的校正。
結尾
這個 Blue’s Reserve 藍標傳奇 的網站，放出去得到蠻多人的詢問，在這邊把一些資訊整理分享給大家。
看完還想多了解一點、或剛好在規劃自家網站，都歡迎聯絡 藍震有限公司。