How to Import and Animate a 3D Model (GLB/GLTF)
Import a GLB or GLTF model into the browser and animate it: frame the camera, set materials and lighting, keyframe a camera move, then export MP4 or WebM.
By the end of this guide you will have a 3D model imported into a browser tab, lit, framed, and turning on a keyframed camera move, exported as MP4 or WebM. You need a KinoViz account and a .glb, .gltf or .fbx file. The 3D editor works on Free; keyframing the camera requires Creator or above.
What you need
- A model under your plan's per-import limit — 10 MB Free, 50 MB Creator, 100 MB Pro, 1 GB Studio — and under the 50 MB ceiling for 3D uploads.
- Roughly 200k polygons or fewer for comfortable viewport performance.
- A desktop browser with WebGL. Nothing to install.
Step by step
1. Prepare the model file
Export from your 3D tool as GLB where possible: it packs geometry, materials and textures into a single file, so nothing goes missing on upload. Apply Draco compression if your exporter offers it, decimate dense meshes, and save colour textures as JPG rather than PNG unless they need transparency.
2. Create a project and add the model
In the editor, click Add → 3D Model in the left toolbar, then Upload Model and pick your file. Alternatively open the Asset Library and insert a model from the built-in collection of royalty-free GLB models — the premium part of that library requires Pro or above.
3. Frame the model in the 3D viewport
Selecting a 3D model switches the canvas into a 3D viewport with its own controls:
| Action | Control |
|---|---|
| Orbit | Left-click drag |
| Pan | Right-click drag, or Shift + left-click drag |
| Zoom | Scroll wheel |
| Focus on model | Press F |
These move the camera, never the model. The View dropdown jumps to preset angles: Front, Back, Left, Right, Top, Bottom, Isometric.
4. Set the camera properties precisely
Open Properties → Camera when you need exact numbers rather than a dragged approximation:
| Property | Range |
|---|---|
| cameraDistance | 1 – 20 |
| cameraOrbitX | −90° to 90° |
| cameraOrbitY | −360° to 360°, multi-revolution |
| cameraZoom | 0.5 – 3 |
| cameraFocalLength | 24 – 200 mm |
Lower focal lengths widen the lens and exaggerate perspective; higher ones flatten it, which usually flatters a product.
5. Adjust materials
With the model selected, open the Materials section. Base colour, metalness, roughness, environment map intensity, normal map, emissive colour and opacity are all editable. If the model has several meshes, choose each from the Mesh dropdown and edit its material independently.
Clearcoat, transmission and the advanced material presets require Pro or above.
6. Set the lighting and environment
Every scene starts with a default rig you can edit under Properties → Lighting, with ambient, directional, point and spot lights available. Selecting an Environment applies an HDRI as a 360° light source and background, which is the quickest route to a believable render. Custom HDRI upload and ground plane controls require Pro or above.
7. Keyframe a camera move
Switch to Animation Mode. Park the playhead, set the camera angle, and record a keyframe; move the playhead and change the angle again. KinoViz interpolates the move. Because cameraOrbitY spans multiple revolutions, a full 360° turntable is a single property change.
Camera motion and 3D animation keyframes require Creator or above.
8. Play built-in clips and export
If your GLB carries baked animations, they appear in the Animation Clips dropdown. Select one, preview it with the play, pause and stop controls, and keyframe the playback state so it obeys the project timeline. Then export MP4 or WebM from the top bar within your plan's resolution and frame rate ceiling.
Tips
- Fix the model before you light it. A heavy mesh makes every later step slower to preview.
- One key light plus an HDRI goes a long way. Stacking lights costs performance and rarely improves the result.
- Turntables read best slowly. A full revolution over six to eight seconds shows the form; two seconds shows a blur.
- Extrude vector art instead of modelling it. Any shape, path or text element can be extruded to 3D on Creator and above, which is often faster than sourcing a model.
FAQ
Which 3D file formats can I import?
GLB, GLTF and FBX, with Draco compression supported. GLB is safest because it packs geometry, materials and textures into one file. The per-import limit follows your plan, and 3D uploads are capped at 50 MB.
Do I need a paid plan to work in 3D?
The 3D editor itself — GLB and GLTF import, camera controls and basic materials — is available on all plans including Free. Camera motion and 3D animation keyframes require Creator or above. Advanced materials, custom HDRI environments and the premium 3D asset library require Pro or above.
Why is my model slow or missing textures?
Check the polygon count first — under roughly 200k keeps the viewport smooth. Then check textures: JPG for colour maps, PNG only where transparency is genuinely needed. Limiting the scene to a few lights also helps.
Can I animate the model itself, not just the camera?
Animations baked into the GLB appear in the Animation Clips dropdown and can be played and keyframed on the timeline. Beyond that, a 3D model behaves like any other element, so its position, scale, rotation and opacity are keyframable alongside the camera.
Related
- 3D System — cameras, materials, lighting and SVG extrusion in full
- Asset Library — the built-in GLB collection and upload limits
- Materials & Effects — glass, metal and shader effects
- How to Animate an SVG in the Browser
- Animation & Timeline — keyframes and easing
- Glossary
- Pricing — which 3D features each plan unlocks