Animating 3D Models in KinoViz — A Complete Guide

KinoViz's unique dual-canvas architecture lets you combine 2D vector animation with 3D model animation on the same canvas. Here's how to get started with 3D.

Supported Formats

KinoViz supports:

• GLB — Binary glTF, the recommended format (smaller file size)
• GLTF — JSON-based 3D format
• Draco compression — Compressed meshes for faster loading

Most 3D tools export to GLB: Blender, Maya, Cinema 4D, Sketchfab, and more.

Importing a 3D Model

1. Open your KinoViz project
2. Click Add → 3D Model in the toolbar
3. Drag your .glb file onto the upload area
4. The model appears on the canvas with a default camera view

Animating the Camera

3D elements in KinoViz are animated through camera controls:

• Orbit — Rotate the camera around the model (horizontal and vertical)
• Zoom — Move the camera closer or farther
• Pan — Shift the camera position left/right/up/down

To animate:

1. Select the 3D element
2. Move the playhead to frame 0
3. Set your starting camera angle
4. Move the playhead forward (e.g., 2 seconds)
5. Change the camera angle — a keyframe is created automatically

Combining 2D and 3D

The real power of KinoViz is mixing 2D and 3D on the same canvas:

• Add a text title that fades in over a rotating 3D product
• Use shape elements as backgrounds or overlays
• Animate a bubble callout pointing to a specific part of the 3D model
• Add particle effects around the 3D model

Performance Tips

• Keep model file size under 10MB for smooth preview
• Use Draco-compressed GLB for fastest loading
• Reduce polygon count if your model has over 100K faces
• Use lower preview quality during editing, export at full quality

Example: Product Showcase

Here's a typical workflow for a product showcase animation:

1. Import your product's 3D model (GLB)
2. Set initial camera angle: front view, slightly above
3. At 0s → 3s: orbit camera 180° around the product
4. At 3s → 4s: zoom in to a detail
5. Add text: product name fading in at 1s, tagline at 2.5s
6. Enable auto-music: "Minimal" style
7. Export as WebM 1080p

The result: a professional product showcase in under 10 minutes.

Start Creating →