Three.js Motion Graphics Authoring

Three.js animations can be built for web playback and composite WebM video export. Strict architectural rules are recommended to ensure canvas pixels export correctly.

1. Core Architecture & Export Contract

• Export-Safe Canvas:
  • ✅ CRITICAL: You MUST set { alpha: true, antialias: true, preserveDrawingBuffer: true } on the WebGLRenderer. Without preserveDrawingBuffer, video exports will be blank/black.
• Transparent Backgrounds:
  • ✅ Manage backgrounds via CSS composite logic when transparency is needed.
  • 🚫 Avoid using scene.background = new THREE.Color(...) in your Three.js code if exporting with transparency.
• Vite Compatibility:
  • ✅ Import dependencies using bare module specifiers: import * as THREE from 'three'; and import { OrbitControls } from 'three/addons/controls/OrbitControls.js'.
  • 🚫 Do NOT use CDNs (https://unpkg.com...), and do NOT inject <script type="importmap">.

2. Animation, Timing & Controls