Media Studio：3D 與 HTML 頁面

3D 導演舞台：先預演，再算繪

它只有一個任務：在您把積分花在影片上之前，先把空間關係確定下來。

走位、運鏡、遮擋、多個人物或車輛彼此的相對位置——這些用文字很容易說錯的事情，會在舞台上以白模實際擺放出來。您先觀看白模預演，確認攝影機與動作，再把這段運鏡送回畫板，用來驅動最終算繪。省下的不只是一次生成，而是重拍整場戲的成本。

影片示範：開啟舞台 → 用攝影機選擇器分別透過主攝影機與兩台鏡頭攝影機檢視 → 播放預演 → 在導演視角中環繞檢視 → 在「攝影機」底下將一台攝影機設為啟用 → 畫面匯出到看板 → 運鏡匯出到看板 → 關閉；畫板上現在多了一張靜態圖與一段預演影片

開始使用

1. 新增節點 → 3D 導演舞台（Beta，由智能體建立）。畫板上會出現一個帶有 3D 標記的節點；它唯一的按鈕是開啟舞台。
2. 按下開啟舞台。舞台會以全螢幕開啟（第一次會看到「正在開啟導演舞台…」）：左側是舞台專屬的對話，右側是 3D 視窗。
3. 在左下角的「描述您的場景...」中描述場景（有誰、在哪裡、如何移動、攝影機如何移動）後送出。舞台智能體預設使用旗艦層級。如果需要起個頭，空白狀態下提供幫我想一個／從場景圖片建立世界／從分鏡建立預演／從網址開始，例如產品頁面。
4. 智能體會把場景搭建成白模預演：人物是符合真實身高的圓柱或方塊，場景是灰色積木——只有體積與動作，沒有材質或燈光。它會為每個鏡頭建立一台攝影機（並保留一台主攝影機），完成後用幾行文字回報。這個步驟幾乎不消耗媒體積分，卻能讓您看出空間安排是否可行。

需求中最關鍵的一句話：請明確寫出「白模，只要動作與運鏡」。少了這句，智能體可能會幫場景加上裝飾（霓虹、雨、反光），之後影片模型就會去模仿外觀而不是動作。Night Run 範例的需求開頭就寫著「PURE WHITE-MODEL PREVIS: no colour, no textures, no materials…」（純白模預演：沒有顏色、沒有材質貼圖、沒有材質…）。

開啟後會看到什麼

頂部列（由左至右）

控制項	功能
導演視角	回到自由攝影機（拖曳可環繞；將滑鼠移上去會顯示鍵盤提示：W A S D 移動，Q E 下降／上升，按住 Shift 加速）
攝影機視角 ▾（攝影機選擇器）	列出智能體建立的攝影機；選擇其中一台即可透過它檢視；還沒有攝影機時會顯示「請先新增攝影機」
↻	從檔案重新載入舞台
16:9 ▾	長寬比：16:9、9:16、1:1、4:3、21:9、3:4
畫面匯出到看板	從啟用中的攝影機算繪一張靜態圖（長邊 1920 px），並以圖片節點的形式加到畫板上；提示「畫面已新增至畫板」
運鏡匯出到看板	透過啟用中的攝影機算繪整條時間軸（長邊 1280 px，在您的瀏覽器中算繪，狀態顯示「正在算繪影片…」），並以影片節點的形式加入；提示「影片已新增至畫板」
繪製	在畫面上繪製並貼上便利貼；可加入佇列，或直接發送給智能體（最多可排入 10 則）
面板圖示／×	顯示／隱藏檢查器；關閉舞台（也可以按 Esc）

右側的檢查器：未選取任何東西時會顯示「點擊舞台上的物件，或從下方的大綱中選取以進行檢查。請智能體搭建、移動場景並為其打光。」下方有四個可收合的區塊：

• 設定 · n——這個舞台專屬的開關、顏色與滑桿（由智能體的程式碼產生，每個舞台都不同）。
• 攝影機 · n——攝影機清單（附視角）。點擊一列即可透過它檢視；選取後會顯示透過檢視、設為使用中（啟用中的攝影機就是畫面／運鏡匯出到看板所使用的攝影機）、視角滑桿以及位置／目標。每一列都有 @（在聊天中提及），會在聊天中插入 @camera:<id>，讓您精準地把智能體指向它。攝影機只能由智能體建立——請在聊天中提出需求。
• 物件 · n——舞台上的物件。點擊一列，或點擊視窗中的物件即可選取：可見、位置／旋轉／縮放、大小。同樣有 @。
• 素材——從電腦上傳檔案（GLB、材質、HDR、音訊…）（.glb／.gltf／.obj／.fbx、材質、HDR、音訊；每個檔案 100 MB）；此舞台上列出這個舞台的檔案，.glb 檔案旁有放置；畫板素材庫 · 3D 列出畫板素材庫中已有的 3D 模型，同樣有放置與 @。

底部的播放器：播放／暫停、循環、時間顯示（例如 7.53 / 16.00）、進度拖曳條、@（在聊天中提及此時刻，會插入 @time:7.5s——「這時車子應該已經過了轉角」只要點一下就能表達）以及全螢幕（會隱藏控制項；按 Esc 可恢復）。時間軸預設為 10 秒、30 fps；智能體可以更改。

在左側的對話中，智能體的工作會以卡片呈現：算繪運鏡 · 0s–4s（把一台攝影機的時段算繪成影片，存到舞台的算繪資料夾）、匯出至畫板（把一組靜態圖／影片以「 · 3D」為標題的群組送到畫板，並附上一則「交接」備註）以及回報結果（本次執行的結論）。由您自己按下的畫面／運鏡匯出到看板只會建立單一節點，不附交接備註。

從預演到正式鏡頭

1. 在畫板上，把預演影片節點的 ⊕ 拖曳 → 影片；選擇一個可接受動作參考的模型（例如 Seedance 2.5），長寬比與預演相同。
2. 在提示詞中說明每個方塊代表什麼，並依它們相對於攝影機的位置來稱呼（「離攝影機最遠、最亮的方塊是逃逸中的黑色轎車；離攝影機最近、車頂有警示燈條的是警車，它全程都跟在後面」）——不要只用顏色描述。影片模型會遵循預演的動作，但角色分配則可能任意發揮。
3. 生成。在 Night Run 範例中，四台攝影機各產出一段預演片段，每段片段都變成一個寫實鏡頭，再在影片合成器中剪成一段 16 秒的段落。

匯入您自己的 3D 模型

從 Blender、C4D 或任何其他工具匯出的 .glb 都可以直接放上舞台：檢查器 → 素材 → 上傳檔案；上傳完成後會自動放置（「 已放上舞台」）。您也可以先把 glb 當作素材上傳到畫板，再從畫板素材庫 · 3D 中放置。放上舞台後，它的行為就和智能體自己的方塊一樣——可以選取、移動、取景。用 Tripo 等工具生成的 3D 節點也會出現在同一個素材庫中。

什麼時候值得使用舞台：多人走位、追逐戲、在室內移動、與周遭環境有固定關係的產品，以及同一個運鏡的多個版本。單純的人像或產品特寫則不需要。

官方範例：尋找靈感中的 Night Run — car chase, 3D stage to Seedance 正是用這種方式完成的——先在白色舞台上鎖定四段運鏡，再送到 Seedance 拍出正式鏡頭。Florida House — floor plan to 3D cutaway 則展示了另一種用法：把一張平面圖轉成俯視算繪圖，再在舞台上逐面牆重建成附家具的 3D 剖面模型，並匯出俯視與 45° 鳥瞰靜態圖。

30 秒認識導演舞台：

3D 世界與骨架綁定

• 3D 世界（新增節點）／圖片上的生成 3D 世界：根據描述或圖片生成一個可以環繞檢視、也能走進去的空間；結果是一個附有漫遊檢視的 3D 節點。

• 綁定骨架：為動畫自動綁定骨架。請注意適用範圍：它只適用於以 Tripo 生成的模型，而且只限角色／生物；上傳的模型、3D 世界以及已綁定骨架的結果都無法綁定。

HTML 頁面：三種類型，各有專屬的 Studio

HTML 節點產出的是一個會播放、會互動的頁面，而不是一張圖片。新增節點 → HTML（Beta）會放置一張空白卡片，它唯一的按鈕是開啟工作室；第一次開啟時，選擇頁面類型會詢問：

類型	對話框中的說明	畫布	對應的 Studio
海報	靜態設計。其中的文字與圖層可以直接編輯。	1080×1620	Design Studio
動效	HTML 動畫：時間軸上的文字、形狀與轉場，可算繪成影片。——對話框的說明低估了它；它其實是畫板上的 After Effects，請見下文	1920×1080	Motion Studio
互動影片	分支影片：觀眾在抉擇點做出選擇。可在瀏覽器中播放，並匯出到 Steam 與行動裝置。	1920×1080	Interactive Studio

將滑鼠移到每張卡片上都會播放一段簡短預覽。只有互動影片有第二個步驟——選擇影片的介面主題：古風（水墨與金漆雕刻、朱紅印章——古裝劇、武俠、宮廷權謀）、科幻（槍灰色面板、青色光條——太空、賽博龐克）、玄幻（細金線條、紫水晶裝飾、符印——修仙、奇幻、神話）與現代（毛玻璃、細線邊框、霓虹粉點綴、對話泡泡式選項——都市、愛情、恐怖、犯罪）。主題只需決定一次；它的素材組會放進影片的主題資料夾中，之後也能在 Studio 中重新調整風格。

選擇後 Studio 會立即開啟（「正在開啟工作室…」），頁面上會顯示一行預留文字，例如「在聊天中描述您的海報」。空白的 Studio 會提供幾個起手提示，點選後會填入輸入框：海報有根據簡短需求製作發表海報／把我的文案排成文字海報／為目前的海報換個風格；動效有依閱讀順序為此頁面加上動畫／一張 6 秒的標題卡／讓動態配合旁白時間；影片有根據我的片段撰寫故事圖／規劃我還需要的段落／重新設計封面與選項風格。

還有第四種類型：應用程式（獨立完整的互動頁面：遊戲、工具、原型）。它不在對話框中——智能體會在任務需要時建立它——它的 Studio 是 App Studio。

節點工具列會隨類型而不同（全螢幕與刪除一律位於右側）：

類型	工具列
海報	匯出圖層、Design Studio
動效	算繪、Motion Studio
互動影片	匯出建置版本、下載建置版本（有建置版本後才會出現）、Interactive Studio
應用程式	App Studio

如果節點中由智能體撰寫的需求尚未執行，會先顯示執行。全螢幕會執行頁面（海報／影片／應用程式）或播放合成內容（動效）。

海報：完成後依然是設計檔

影片示範：海報節點 → 匯出圖層 → 畫板上出現一份分層文件 → 編輯圖層開啟圖層編輯器 → 修改一個圖層 → 匯出至畫布

Design Studio 內部

Design Studio 會以全螢幕開啟：左側是海報專屬的對話，右側是頁面。

• 第一排分頁：隱藏聊天／顯示聊天、設計檔案、各檔案分頁、智能體提問時的問題；右側是匯出 ▾（匯出圖片、匯出 PSD——海報的每個圖層各對應一個圖層——以及匯出圖層至面板）與演示。
• 第二排：重新載入預覽、微調（請智能體提供可調整的控制項）、評論（針對頁面上的某個元素留言）、編輯（右側抽屜：點擊畫布上的任何元素，即可修改其字體排版、大小與外框）、繪製（標註後送給智能體）、縮放。
• 圖層面板：海報的每個圖層（演職員表、標題、標語、主視覺…），每個都有眼睛圖示可隱藏圖層／顯示圖層；圖片圖層另提供重新生成圖片。
• 變更會直接寫入頁面；沒有儲存按鈕。若想改變整體風格，請在聊天中提出。

匯出圖層，並在圖層編輯器中完成

1. 回到畫板，選取海報節點並按下匯出圖層（卡片會顯示「正在匯出圖層…」）。
2. 完成後——顯示「圖層已匯出至新節點」——海報旁會出現一份名為「 layers」的分層文件，海報的每個圖層各對應一個圖層（最多 128 個）。無法點陣化的圖層（例如以 SVG 濾鏡製作的底片顆粒）會被略過，並顯示「已略過 N 個圖層：…」。
3. 按下它的編輯圖層，即可進入媲美 Photoshop 的圖層編輯器：順序、不透明度、混合模式、修圖、裁剪、文字——請參閱畫板與圖片工具。
4. 使用匯出至畫布把結果以新圖片的形式帶回畫板，或選擇下載 PNG／PSD。

這條流程——頁面 → 匯出圖層 → 圖層編輯器 → 回到畫板——是 Media Studio 中最常被忽略、也最實用的一條：AI 生成的版面可以像設計檔一樣編輯，而不必重新生成。

動效頁面：畫板上的 After Effects

動效節點不是「一小段動畫」，而是一份逐格精準算繪的合成：Motion Studio 的智能體用 HTML 撰寫它，再由算繪逐格轉成影片。在畫板上，它是生成片段無法承載的那道後製工序——只要畫面必須精準到位，就交給它：

• 疊在實拍或生成素材上的文案、數字、Logo 與品牌字體；
• 標題卡、片名、下方字幕條、片尾卡；
• 講解影片與數據故事：長條從座標軸長出、折線沿路徑描繪、數字跳動到目標值；
• 宣傳與產品作品、發表影片、產品更新、HUD 示範、預告片：完全由圖形、文字與介面動態構成的完整作品；
• 根據旁白音軌製作的逐字同步字幕（醒目標示、卡拉 OK 膠囊、全螢幕重擊、霓虹、漸層填色——或是一般的字幕列與企業風格的下方字幕條）；
• 遮色片與混合模式，以及場景之間的 WebGL 著色器轉場（交叉淡化、擦除、漣漪、快門、故障、模糊切換、閃白…）；
• Three.js 3D：模型、粒子、燈光與運鏡——適用於必須逐格控制、而不是交給影片模型去猜的 3D 鏡頭；
• Lottie 動畫、多場景作品（每個場景一個子合成），以及參數化範本（標題、顏色與長度皆為變數）。

素材如何放進來：把畫板上的影片／圖片／音訊節點連接到動效節點。影片會成為底層的全畫面素材（可以帶有緩慢推近之類的運鏡），圖片會成為圖層，音訊則成為旁白或背景音樂——而且作品會配合聲音的節奏：連接音訊節點後，片段的長度以及每一行文字出現的時機都會跟著聲音走。

首頁尋找靈感中九件 HTML 動效作品的精華剪輯（每件 5 秒）：空拍素材上的 HUD、以動態繪出產品介面的發表影片、圖示變形為 Logo、把數字放上畫面的產品更新、疊在素材上的數據報告、知識影片中自動繪製的圖表、1:1 的電商影片、像素遊戲示範，以及 VHS 風格的預告片——每一件都是從動效節點算繪出來的。

什麼時候該用動效，什麼時候不該用

您想要	使用
精準的文字、數字、Logo 或介面；標題卡、下方字幕條、字幕	動效
講解影片、數據報告、產品更新、發表影片、HUD、預告片、電商影片	動效（整件作品）
已生成的片段，再加上標題／品牌字體／逐字同步字幕／數據疊加	動效：連接該影片節點，算繪出新的影片節點；原始片段保持不變
真人表演、自然場景、鏡頭質感、光線	影片生成；若文字必須精準，再用動效處理一次
只需要串接片段、字幕列、音樂、匯出	影片合成器會更快
可以持續編輯的靜態版面	海報

開始使用

三條路線都能抵達同一個地方：

1. 告訴智能體（最常見的方式）：描述作品，說明「做成 HTML 動效頁面」，並連接或 @ 提及產品照、素材、Logo 與旁白。智能體會先把腳本／規格寫進一個文字節點，再建立動效節點並交給 Studio；算繪結果是動效節點旁的影片節點，若您需要一份母帶，合成器會再混入音效或加上開場——首頁的九個範例都是這個結構：規格文字 → 動效節點 → 算繪影片 → 合成器。
2. 自己放置節點：新增節點 → HTML → 開啟工作室 → 動效，然後在 Studio 的聊天中撰寫需求（長度、場景、每個場景顯示哪些文字、品牌色、音效／旁白）。
3. 從範例開始：首頁尋找靈感中的任一 HTML 動效卡片 → 複製並繼續，再換上您的產品名稱、數字與顏色（每個範例都附有一行接續用的提示詞；請參閱範例 16）。

Motion Studio 如何運作

Motion Studio 以對話驅動。 這裡沒有可以拖曳的關鍵影格時間軸——智能體會根據您的描述，把素材、文字、圖形與轉場排在時間軸上；您觀看預覽（進度條可以拖到任何時刻），再用一句話修改。

影片示範：修改空拍素材上的 HUD——開啟 Motion Studio → 播放到 12 秒的目標鎖定處 → 要求「琥珀色準星，並在左下角顯示信心值」→ 智能體完成後按下重新載入預覽並再次播放 → 關閉 → 算繪 → 畫板上的影片節點就地更新

1. 選取一個動效節點並按下 Motion Studio（或卡片上的按鈕）。左側是對話（輸入框顯示「描述您希望此頁面呈現的動態...」）；右側是播放器，底部有播放、可拖曳的進度條、靜音與播放速度。
2. 拖曳到您想修改的時刻並描述變更——「標題改成從左側滑入，不要淡入；三個大數字各用兩秒跳動到目標值；鎖定準星改成琥珀色；最後的定版畫面多停留一秒」。智能體會摘要說明它修改了哪些時間點。
3. 按下重新載入預覽並再次播放。頂部列還有繪製（圈出位置並送給智能體）與關閉。
4. 關閉 Studio，選取節點並按下算繪：卡片會顯示「正在算繪…」，接著顯示「動效已算繪完成」，旁邊會出現（或更新）一個同名的影片節點。再次算繪會就地更新那個影片節點——算繪結果不會越堆越多。
5. 這個影片節點可以直接放進影片合成器中進行剪輯、混音或加上開場。

值得了解的事：把音訊節點連接到動效節點，算繪時就會把它當成旁白，並配合它的長度；同時可執行兩個算繪任務，每個最長約 20 分鐘；一個動效頁面最多可容納 60 個元素節點。頁面本身的音效、音樂與旁白都會納入算繪；若要疊加更多聲音，請把算繪出的影片與音訊節點一起放進合成器。對於較複雜的合成（3D、著色器轉場、多場景長作品），請把 Studio 的模型層級設為旗艦或 Mega。當 AI 簡報／Design 頁面被做成有旁白的影片時，每一頁都是這樣的一個動效節點——開啟該頁的 Motion Studio 進行修改，然後只重新算繪那一頁。

30 秒認識動效頁面：

互動影片

互動影片是一張由 5–15 秒段落構成的圖：觀眾在每個抉擇點做出選擇，故事隨之分支，最後走向數種結局之一。

影片示範：選取影片節點 → 全螢幕開啟播放器 → 封面 → 新遊戲 → 第一個段落 → 抉擇點出現四個選項 → 選擇其中一個 → 故事分支 → 故事樹顯示流程圖 → 選單開啟暫停卡 → 繼續

製作互動影片

• 腳本、段落與分支全部存放在專案中：story.json 包含開場、每個段落的影片、字幕（.vtt）、1–6 個選項與接下來的走向，還有章節、角色、成就與介面字串。
• 最簡單的方式是使用互動影片遊戲技能（「把故事變成分支互動影片：觀眾在抉擇點做出選擇；可在畫布上預覽，並匯出到 Steam 與行動裝置。」）：智能體會根據一個故事撰寫故事圖、列出還需要的段落、生成這些段落，並把它們串接到播放器中。在畫板上，您會看到每條分支各有一個影片節點，以及一個「故事樹」文字節點。
• 使用 Interactive Studio，透過聊天調整封面、選項文案與主題。

播放器內部

• 封面：標題與標語；播放會開啟標題選單：繼續／新遊戲／章節／讀取／結局（已解鎖 n/4）／成就／角色／設定／製作名單。
• 播放中：左上角顯示章節名稱；右上角有四個標記——章節／結局／故事樹／選單；右下角有 CC（字幕）、1.0×（速度）、全螢幕。第一次觀看時無法略過（「首次觀看無法略過」）；已看過的段落會出現 ⏭ 略過已看過。
• 抉擇點：選項卡片會在段落結束前幾秒出現（可選擇加上倒數計時——限時抉擇；逾時則採用預設選項：「沉默也是一種選擇」）。
• 故事樹：整部影片的流程圖，已造訪的節點會亮起，並提供全部顯示／定位目前位置／從這裡重來。
• 選單（暫停卡）：繼續／重播此場景／章節／存檔／讀取／設定／回到標題；三個存檔欄位，另有自動存檔。
• 設定：音量、音效、播放速度、字幕、字幕樣式（外框／字幕條）、說話者名稱、字幕大小、已看過的段落、全部下載、清除下載與存檔、全螢幕。

打包與發佈

1. 選取節點並按下匯出建置版本：彈出視窗會依序顯示「正在準備建置版本…」、「正在上傳媒體 n/total」、「正在打包建置版本…」。
2. 完成後按鈕會變成下載建置版本，彈出視窗會顯示**「下載 zip 檔並交給桌面應用程式 GenCode。它會協助您打包並發佈到網頁、桌面（Steam）與行動裝置。」**（GenCode 會連結到下載頁面。）
3. zip 檔中包含 app/（網頁建置版本：index.html、執行環境、story.json、manifest）、desktop/（附 Steam depot 腳本的 Electron 專案）、mobile/（適用於 iOS 與 Android 的 Capacitor 專案）以及一份 README。實際發佈則在 GenCode 中進行——生成內容與託管內容是刻意分開的。

畫板匯出的是串流式建置版本（媒體會從雲端取得），因此專案必須先公開分享；否則您會看到「專案尚未公開分享：在公開之前，串流式建置版本無法取得媒體」。

官方範例 The Lighthouse Signal — interactive film 是一個擁有四種結局的完整專案；它的唯讀畫板會顯示每一個分支段落與故事樹。

30 秒認識互動影片：

常見問題

導演舞台和直接生成影片有什麼不同？

舞台會先給您一段白模預演：在任何積分投入算繪之前，攝影機、走位與遮擋就已經一目了然。對於空間關係複雜的場景，這正是避免整場重拍的關鍵。

我可以使用自己的 3D 模型嗎？

可以。檢查器 → 素材 → 上傳檔案可接受 .glb（以及 gltf／obj／fbx、材質、HDR、音訊；每個檔案 100 MB），或從畫板素材庫 · 3D 中放置。不過，綁定骨架只適用於 Tripo 生成的模型——這兩者是不同的功能。

畫面匯出到看板會擷取我正在看的視角嗎？

不會——它算繪的是啟用中的攝影機。若要擷取您正透過其檢視的攝影機，請在「攝影機」底下選取它並按下設為使用中。

HTML 頁面做好之後還能編輯嗎？

可以，而且有好幾個層次：在頁面的 Studio 中直接編輯頁面本身（聊天、編輯抽屜、圖層面板）；若需要像素等級的處理，匯出圖層會把它轉成可在圖層編輯器中編輯的分層文件。

為什麼 Motion Studio 沒有時間軸？

因為它以對話驅動：智能體根據您的描述安排動態，您觀看預覽並用一句話修改；在提出意見之前，可以用播放器的進度條拖到任何時刻。若需要逐格控制，請把時間點寫進需求中（「長條在第 3 秒長出」、「在 12 秒鎖定」），智能體會精準到秒地安排——這正是它和影片模型的差別：畫面是寫出來的，不是猜出來的。

互動影片可以發佈嗎？

可以——先匯出建置版本，再用 GenCode 發佈到網頁、桌面（Steam）與行動裝置。

疑難排解

舞台或 Motion Studio 無法開啟

「此帳戶未啟用 3D 導演舞台」／「此帳戶未啟用 Motion Studio」幾乎都代表工作區管理員已關閉 Media Studio（與畫板使用同一個開關），或您對該專案沒有寫入權限（唯讀分享）。唯讀專案也會顯示「此舞台尚未設定。請擁有者先開啟一次。」

舞台一片空白／「舞台載入失敗。」

按下重新載入；如果沒有幫助，請按請智能體修正——智能體會檢查它自己的程式碼。

運鏡匯出到看板的影片是黑畫面或非常短

在瀏覽器算繪期間請不要切換分頁；並檢查啟用中的攝影機與時間軸長度（播放器右側顯示的總長）。

匯出的圖層與海報不一致

匯出圖層會把每個可匯出的元素點陣化；SVG 濾鏡與部分混合效果無法成為獨立圖層，因此會被略過，卡片上會顯示「已略過 N 個圖層」。

算繪沒有反應／「已在算繪中」

每個節點同時只能執行一個算繪任務，每個專案最多兩個；請等待「正在算繪…」消失。海報沒有動態可以算繪——它需要的是匯出圖層。