3D 鏡頭
Three.js (即時圖層)
- 從
/engines/three.js使用threeLayer(el, { update(t), background, fov })。為three新增 import map (參見examples/engines-demo/index.html)。 update(t)根據t設定所有變換。攝影機動畫：在一般物件上使用 GSAP 補間動畫來設定關鍵幀 (tl.to(cam, { x: 4, z: 8, duration: 2 }, 3))，並在update中將值複製到camera.position。- 模型：從
three/addons/loaders/GLTFLoader.js使用GLTFLoader(在 import map 中添加"three/addons/": "/core/node_modules/three/examples/jsm/")。將載入動作包裹在Studio.wait(...)中。 將模型檔案放在品牌的assets/models/或製作物件的composition/目錄下。 - 外觀 (
looks/README.md) 決定渲染風格；同一個模型可以採用以下任一種方式：- 卡通 (
looks/toon-3d)：toon(color, { steps })+outline(mesh, { thickness })。硬光：一個DirectionalLight+ 低強度的AmbientLight。 - 擬真 (
looks/photoreal)：await realistic(renderer, scene)(包裹在Studio.wait中：ACES 色調映射、一個用於反射的室內環境、柔和的陰影) +pbr(color, { metalness, roughness, clearcoat })。一個帶有castShadow的主光、一個從後方來的冷色背光、一個放在 CSS 漸層上的ShadowMaterial地板。保持攝影機高於掠射角度 (光澤面會變白)，緩慢移動，最終使用Studio.setup({ motionBlur: true })渲染。 - 霓虹 (
looks/neon-noir)：emissive(color, intensity)+threeLayer(el, { post: bloom({ strength, threshold }) })，scene.fog。保持threshold≥ 0.2 且 emissive ≤ 2，否則所有物體都會泛光成白色。
- 卡通 (
- 動畫 GLB 片段：建立一個
AnimationMixer，然後在update中呼叫mixer.setTime(t - start)。永遠不要使用mixer.update(delta)。 - 跟隨 3D 點的 HTML 標籤：在
update(t)中，先呼叫camera.updateMatrixWorld()及其父物件的updateMatrixWorld()，再執行vector.applyMatrix4(obj.matrixWorld).project(camera)。Three.js 只會在render()內部更新這些矩陣，所以如果沒有呼叫，標籤會停留在上一幀的位置。範例：productions/bike-logger/REEL-002-engines。 - 作為 JSON (頂點 + 索引) 的 CAD 網格：使用
toNonIndexed()+computeVertexNormals()可產生清晰的平面形面。 使用threeLayer(..., { pixelRatio: 2 })渲染以獲得超採樣邊緣。 - 物理：預先烘焙 (在第一幀之前以固定的 1/120 秒步長模擬到一個陣列中)，然後根據
t進行查詢。 - 說話角色：使用經典的
<script>標籤載入/engines/lipsync.js以及台詞的.visemes.js(由scripts/lipsync.sh產生)， 然後在update(t)中：LipSync.paramsAt(cues, t, "mouth", { offset })→{ open, wide, round }(0…1) 應用到變形目標 (mesh.morphTargetInfluences) 或嘴巴網格的縮放。參見engines/README.md， Lip sync 章節。
Blender (預渲染背景)
- 場景腳本定義
build(ctx)；複製engines/blender/example_scene.py。ctx提供toon(rgb)、key(obj, "location", t, value)、size、fps、duration、frames、scene。 - 渲染：
engines/blender/render.sh scene.py composition/plates/<name>.mp4 --size 1080x1920 --duration 4 [--engine EEVEE|CYCLES|WORKBENCH]。 草稿使用--size 540x960，最終渲染使用完整尺寸。 - 背景顏色：僅對攝影機顯示 (使用光線路徑 "Is Camera Ray" 混合，如同範例所示)，否則它會照亮場景並使卡通色帶扁平化。
- 色彩管理設定為 Standard，以便品牌十六進制顏色按輸入值顯示。對於擬真背景，請在
build中切換為ctx["scene"].view_settings.view_transform = "AgX"，使用--engine CYCLES渲染，並使用區域光 和攝影機景深。 - 物理與模擬：在渲染前於場景腳本中預先烘焙。
- 說話角色：在場景腳本中
import lipsync as L(run.py會將engines/blender/和腳本本身的 資料夾加入路徑)，cues = L.load("productions/…/audio/vo.visemes.json")，然後L.key_shape_keys(head, cues, ctx, offset=VO_START)在每一幀上對形狀鍵open、wide、round設定關鍵幀 (使用names={"open": "Jaw"}對應其他名稱)。其他情況：每幀使用ctx["key"]呼叫L.params_at(cues, t, offset=…)。 - 在合成中：
<video src="plates/<name>.mp4">+Studio.video(el, { start })。背景沒有 Alpha 通道；將 文字和角色放在上層的 HTML 圖層中。
檢查
將關鍵畫格渲染為靜態圖像並仔細檢查。對於 Three.js，將同一幀渲染兩次並比較 MD5 值。將渲染時間記錄在製作日誌中。