Opus 5.5 做出 CD 盒三維動畫：免匯入模型，Three.js 仍要驗收幾何與互動
創作者 Ann Nguyen 示範用 Opus 5.5 製作 CD 盒開蓋動畫，結合 Three.js 與 shader。本文解釋免匯入外部模型的意思，拆解幾何、塑膠材質、轉軸與互動驗收，幫助設計師判斷 AI 產生的網站三維動畫能否交付。
Opus 5.5 做出 CD 盒三維動畫，是創作者 Ann Nguyen 在 X 分享的一個示範。透明盒蓋打開、封面與盒身一起形成空間感，吸引人注意。
作者在 2026 年 10 月 11 日的貼文說，她讓 Opus 5.5 以 Three.js 和 shader 做開蓋動畫，並表示不需要三維模型。這是一位創作者的作品展示。
這裡的「不需要模型」，應理解為不必匯入外部製作的模型檔。Three.js 仍需在程式中建立形狀、位置與材質，才會有可渲染的三維畫面。
對設計師而言，它降低的是從概念開始試作的門檻。一個熟悉物件，可以透過程式碼構成場景，再讓 AI 協助調整外觀與動作。
但示範片段不會告訴我們作者修改了幾輪、如何處理不同裝置，或是否已完成可交付的網站。不能把它放大成所有三維需求都能一次生成。
我會用這類作品快速確認視覺方向，再把結構和互動當成另一段驗收。盒蓋看起來會動，只是可用作品的一部分。
要判斷哪些工作真的省下來，先看程式做的盒子和匯入模型有什麼差別。
Opus 5.5 做出 CD 盒三維動畫，程式裡仍有模型結構
Three.js 是用 JavaScript 建立三維場景的工具。幾何描述形狀，材質決定表面如何顯示，場景和相機則安排觀眾看到什麼。
官方 Mesh 文件把三維物件的主要組成連在一起：幾何加上材質，形成可放入場景的網格物件。程式直接建立它，並不需要先匯入建模軟體的檔案。
CD 盒的外形相對規則，能用盒身、盒蓋、轉軸和封面平面逐步組合。這是理解程式建模的例子，不代表本文取得了作者完整實作。
一個平面可以貼上封面圖片，外層再用透明材質表現塑膠。這些物件仍有尺寸、位置和朝向，只是由程式數值定義。
免去外部模型檔，有助於快速改盒子厚度、封面比例或開蓋角度。對簡單幾何，數值調整可能比重新輸出模型更直接。
遇到複雜雕刻、人物或有大量細部的商品，就不一定適合相同方法。示範物件的規則外形，是它能用程式建立的重要條件。
因此，判斷 AI 三維作品時要看對象的複雜度。一個結構簡單的盒子成功，不足以證明複雜產品同樣容易，也不代表傳統建模已沒有用途。
作者提到 Opus 5.5，說明她所用的生成工具。作品屬於原作者展示，不能把它寫成 Anthropic 官方推出 CD 盒功能或公佈三維效能基準。
AI 協助寫程式，與每一格生成圖片不同
這類三維互動場景可以由程式持續渲染，依使用者操作改變物件狀態。它和預先生成一段影片、再按播放鍵的使用方式不同。
同一個盒子可以在開啟途中暫停、反向或切換封面，前提是程式有設計這些行為。影片展示只有部分動作，不能推論所有互動已經完成。
AI 協助產生的是場景和動作程式的候選實作。使用者看到的每一個畫面，仍由三維渲染流程計算，而非每次點擊都重新請模型生成。
這讓部署成本和修改方式也不同。程式可以在瀏覽器執行，但需要下載的資源、裝置效能和畫面設計，仍會影響實際體驗。
塑膠質感由幾何、光線與 shader 一起形成
著色器（Shader）是控制畫面計算的程式，可以影響物件顏色、透明度和表面效果。Three.js 的 ShaderMaterial 讓開發者以自訂著色程式處理這些計算。
透明 CD 盒看起來像塑膠，不只因為顏色淡。盒邊厚度、反射、封面和背景之間的關係，都會影響人對材質的判斷。
如果只把一個立方體調得透明，可能比較像玻璃或一片淡色平面。邊緣、轉角和高光通常需要一起調整，才接近熟悉的盒子外觀。
這是一般三維製作原理，並不是作者已公開的調整順序。原作展示提供視覺方向，官方工具文件則幫助解釋這類效果由哪些部分構成。
設計師可以把回饋從「再真實一點」改成具體觀察。例如邊緣太薄、封面透出的位置不對，或盒蓋打開以後反光突然改變。
這種回饋更容易轉成程式碼調整。AI 得到可定位的問題，也比較容易修改相應材質或結構，而不是每輪把整套畫面重新解釋。
透明物件還涉及繪製順序。不同表面相互覆蓋，可能出現本應在後面的物件跑到前面，或盒蓋轉到某個角度突然消失。
驗收時因此要看多個角度，而不只看最漂亮的正面截圖。打開前、半開和完全打開，可能暴露不同的表面關係。
燈光也要和網頁背景一起測試。演示使用的深色背景能凸顯反光，放到白色產品頁後，透明邊緣可能變得難以辨認。
網頁裡還可能有標題、按鈕和正文。動畫的視覺對比應該支持這些內容，而不是讓觀眾只能看見盒子，找不到下一步操作。
開蓋動作先看轉軸，再看節奏
盒蓋的轉動需要一個合理支點。若繞盒蓋中心旋轉，它可能像懸空卡片，而不是沿著盒邊鉸鏈打開。
Three.js 的 Object3D 提供物件階層與轉換，開發者可以把相關物件組織在一起。父層轉動時，子物件會依結構一起移動，適合表達連接關係。
在 CD 盒情境，盒蓋和封面應跟著同一套開合關係。若只有透明殼轉動、封面留在原位，看起來流暢也會破壞物件的合理性。
這類錯誤是結構問題，改速度不會解決。先確認連接和支點，再調整節奏，能避免把幾何錯誤藏進快速動畫裡。
節奏需要符合觀看目的。作為產品展示，可以慢一點讓人看見內部；作為點擊回饋，則要避免等待太久才知道操作已被接收。
緩動是讓速度逐漸變化的方式，可以讓動作起止較自然。但過強的彈跳可能讓硬塑膠盒看起來像軟材質，需和物件特性一起判斷。
相機也影響動作是否可讀。盒蓋朝觀眾打開時可能擋住內部，稍微換角度則更容易同時看到盒身和封面，目的不同會有不同配置。
這不是增加效果越多越好。轉軸和關鍵面看得清楚，通常比複雜鏡頭旋轉更能幫助觀眾理解物件如何開合。
把中途再點一次納入測試
使用者可能在打開一半時再次點擊。程式可以選擇反向、忽略或排隊，但必須有一致行為，不能讓同一個盒蓋被兩段動畫同時控制。
如果再次點擊會突然跳到終點，體驗可能顯得不穩定。設計階段就定義如何處理中途操作，比交付後再補特例更容易維持結構。
自動播放也要定義重播方式。第一輪很順，第二輪卻讓盒蓋位置累積偏移，通常說明狀態和重設沒有處理完整。
示範轉成網站，需要補哪些驗收？
先把作品的主要用途說清楚。如果目的是讓人查看專輯封面，動畫完成後應該留出足夠時間和空間，讓封面可辨認。
如果目的是吸引點擊購買，按鈕應在動畫之外仍清楚可用。不能讓商品動畫搶走全部操作區域，或要求觀眾先看完整段才繼續瀏覽。
桌面預覽往往給三維場景很大空間。手機螢幕較窄，盒蓋打開後可能超出邊界，或者封面縮得太小而看不清楚。
因此需要用實際手機寬度檢驗場景構圖。保持物件可見，不一定等於簡單縮小全部尺寸，有時需要調整相機距離和留白。
觸控也和滑鼠不同。若設計依賴懸停預覽，手機使用者無法自然重現，應該有清楚的點擊入口和可理解的回饋。
鍵盤操作同樣應能觸發主要行為。三維畫面只是呈現方式，開合動作仍可由一般按鈕提供，讓更多使用者順利操作。
偏好減少動態效果的使用者，可以看到靜態或簡化版本。關閉華麗過場，不應該連基本內容與功能一起消失。
這些是網站交付建議，本文未測試作者示範的裝置適配。把建議寫成已完成的功能，反而會掩蓋實際需要驗證的部分。
長期執行還要看資源是否釋放。反覆進入頁面、切換封面或重建場景，若舊的材質和紋理一直留著，可能逐漸增加佔用。
頁面中多個三維動畫也會共同競爭裝置資源。單獨看一件作品很順，放進有影片、圖表和其他動畫的頁面，可能得到不同體驗。
工程驗收可記錄實際裝置、瀏覽器、畫面尺寸和行為。出現問題時，同事才能判斷是某個場景配置、某種裝置，還是整體資源造成。
設計師怎麼和 AI 一起修這種作品？
第一輪適合固定物件組成，讓 AI 先做清楚的盒身、盒蓋和開合關係。把材質要求一次堆滿，容易讓最基本的連接問題被忽略。
結構正確後，再逐項調整透明度、邊緣和反光。每次改一項重點，比較前後變化，更容易知道哪種修改真的改善畫面。
提示也可以包含明確驗收條件。例如半開時封面仍連在盒蓋、關閉後邊緣對齊，以及快速點擊不會產生重疊動畫。
這是建議的協作方式，不是復刻作者完整提示。公開示範沒有提供全部迭代紀錄，讀者不應假設照抄一句話就會得到同樣成品。
AI 修改程式後，應再次檢查之前通過的行為。調整材質可能影響透明面顯示，改變物件層級也可能讓按鈕動畫接到錯誤對象。
保留前後版本能幫助判斷這種迴歸。若新版本外觀更好、開合卻壞了，可以只修正相應部分，而不是把前一次成果全部重做。
封面圖片同樣需要適合使用。自己製作或取得授權的封面，能讓這個場景成為可交付作品，不能由程式開源推論所有圖片都可任意使用。
若團隊想把三維物件做得更可靠，可以把連接關係納入驗收。盒蓋、轉軸與封面在不同角度仍維持合理位置，比單張正面圖更能說明結構。
互動動畫從示範到網站，也需要明確狀態和版本記錄。同事才能知道哪個版本通過開合測試，以及後來的視覺調整是否影響原本操作。
用可比較的畫面留下修改理由
每次選版，可以保留關閉、半開和全開三張畫面，並寫下一句選擇理由。這樣同事討論的是同一組狀態，不會各自憑印象評價。
材質比較時固定光線和背景，動作比較時固定物件外形。條件變化太多，很難分辨是哪個修改讓作品更好，也難以回到已確認的版本。
最後把最重要的操作完整跑一遍，包含打開、關閉、快速重複操作和視窗大小改變。它們比只播放一次示範影片，更接近網站的真實使用。
三維場景若只是裝飾，可以在資源尚未載入時保留封面靜態圖。這讓網頁先呈現內容，互動準備完成後再加入動畫，避免訪客先面對一塊空白。
延伸閱讀：3JSBench 揭露 AI 3D 物件的連接問題：做 Three.js 作品，如何同時驗收外觀與結構？
延伸閱讀：Rive CLI 教學：讓 AI 做可互動動畫，從預覽、版本管理到網站驗收
FAQ：Opus 5.5 做 CD 盒三維動畫常見問題
作者說不需要三維模型，是否代表沒有幾何？
程式仍會建立三維形狀和網格。免匯入外部模型檔，讓簡單物件可以直接以程式碼組成，不能解釋成場景完全沒有模型結構。
這是 Anthropic 官方功能展示嗎？
消息來源是 Ann Nguyen 的個人作品示範。她提到使用 Opus 5.5，並非 Anthropic 官方發佈 CD 盒產品，也不是系統性效能測驗。
Shader 可以讓所有裝置都得到同樣效果嗎？
實際畫面與速度會受到瀏覽器、顯示設備和渲染配置影響。官方 ShaderMaterial 說明自訂著色方式，部署仍要依目標裝置驗證。
一段示範片能證明網站已可交付嗎？
示範能展示部分視覺效果，不能涵蓋所有觸控、鍵盤、尺寸和重複操作。交付網站前，需要依實際使用情境檢查這些行為。
結語：把吸引人的效果，變成可重複操作的作品
這個 CD 盒展示了 AI 協助程式製作三維視覺的吸引力。以程式建立幾何能省去外部模型的準備步驟，結構、材質和互動仍需要各自的判斷。
先用它確認想要的外觀，再逐項檢查開合關係和頁面操作。能在多種狀態下保持合理，才有機會把一段漂亮演示，轉成真正可使用的網頁體驗。
想追蹤 AI 設計工具與網站動畫製作，歡迎免費訂閱 AI 郵報。
