Three.js is lazy-loaded via a dynamic import and is only initialized when the first 3D layer becomes active. Projects with no 3D layers have zero overhead from this feature.
Architecture
Enabling 3D mode on a layer
Select any video or image clip and click the 2D / 3D toggle button in the Transform panel. This switches the layer to a textured plane in the Three.js scene and exposes the full set of 3D transform controls. Toggling back to 2D resets Position Z and Rotation X/Y to zero.Importing 3D models
Add the model to the Media panel
Drag an OBJ, glTF, GLB, or FBX file into the Media panel. The file is stored and appears in the panel’s file list.
Add to the timeline
Drag the model from the Media panel onto the timeline. A clip is created with
is3D: true set automatically — model clips cannot be switched to 2D mode.Enable 3D mode (if needed)
Model clips are already in 3D mode. For video or image clips, click the 2D / 3D toggle in the Transform panel.
Supported formats
| Format | Loader | Notes |
|---|---|---|
.obj | OBJLoader | Default Blender export. No materials without an accompanying .mtl file — falls back to gray MeshStandardMaterial. |
.gltf | GLTFLoader | Khronos standard, text-based. |
.glb | GLTFLoader | Binary glTF — most common format for web delivery. |
.fbx | GLTFLoader (fallback) | Autodesk format. Support is limited. |
Primitive meshes
Create 3D geometry without importing a file. In the Media panel, click + Add › Mesh or right-click and choose a primitive from the context menu.| Primitive | Three.js geometry | Default size |
|---|---|---|
| Cube | BoxGeometry | 0.6 × 0.6 × 0.6 |
| Sphere | SphereGeometry | radius 0.35, 32 × 24 segments |
| Plane | PlaneGeometry | 0.8 × 0.8 |
| Cylinder | CylinderGeometry | radius 0.25, height 0.6 |
| Torus | TorusGeometry | radius 0.3, tube 0.1 |
| Cone | ConeGeometry | radius 0.3, height 0.6 |
MeshStandardMaterial (color #aaaaaa, metalness 0.3, roughness 0.6). Enable the Wire button in the Transform panel to render a blue wireframe overlay.
Lighting
The 3D scene uses two default lights:- Ambient light — intensity 0.6, illuminates all surfaces equally
- Directional light — intensity 0.8, casts directional shading
Camera
Each composition has a single perspective camera with the following configurable properties:| Property | Default |
|---|---|
| FOV | 50° |
| Position | Auto-calculated to fill the viewport at default transform |
| Target (look-at) | Center of scene |
| Near / far planes | Configurable |
3D transforms
In 3D mode, the full three-axis transform is available:| Property | Controls |
|---|---|
| Position | X, Y, Z |
| Rotation | X, Y, Z (displayed as Nx + remainder°, e.g. 2x +30.0°) |
| Scale | X, Y, Z (Z available for model clips) |
| Opacity | Composited at the WebGPU layer level |
| Blend mode | All 37 modes supported |
position.z, rotation.x, rotation.y, and rotation.z are hidden when the clip is in 2D mode.
GPU effects on 3D layers
GPU effects (blur, color correction, keying, and all other categories) apply as post-processing on the Three.js render output. Because Three.js renders to a texture first, effects behave identically to 2D layers.Limitations
- No PBR material editor — models use embedded or default materials only
- No shadow casting between layers
- Camera is per-composition and is not keyframeable
- Model clips require file re-authorization after a page refresh (same behavior as video clips)