Open your
Three.js page.
Import the HTML with its models and textures, or paste it in. ES modules and import maps from jsDelivr or unpkg load automatically.
THREE.JS & WEBGL TO VIDEO
Render Three.js scenes
to MP4 in 4K.
Export Three.js and WebGL scenes as smooth video, rendered on your graphics card at any size. Import maps and CDN modules work as they do in the browser.
How to render a Three.js scene to video
Open your
Draw each
frame from time.
Move your animation loop into renderFrame(time) and call renderer.render there, so every frame is exact.
Pick 4K
or any size.
The scene renders at the export size, not your window size. Choose 3840 × 2160, vertical or square.
Export on
your GPU.
WebGL runs on your graphics card. Supported NVIDIA cards also encode the video, and long renders split into parallel parts.
A Three.js scene with a renderFrame hook
Replace requestAnimationFrame with a function of time. The studio calls it for every frame:
<script type="importmap">
{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js" } }
</script>
<script type="module">
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene(), camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, .1, 100);
camera.position.z = 5;
const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial());
scene.add(cube);
window.renderFrame = (time) => {
cube.rotation.set(time * .6, time * .9, 0);
renderer.render(scene, camera);
};
renderFrame(0, 0);
</script>Tips for Three.js video renders
- Use time, not a clock. Replace
clock.getDelta()with thetimeargument, so frames do not depend on how fast your PC is. - Load assets before the first frame. Wait for GLTF models and textures, then call
renderFrame(0, 0). - Watch the GPU memory. Very large textures at 4K use a lot of video memory; the studio lowers the number of parallel parts when memory is short.
- Keep physics repeatable. Step a physics engine with a fixed time step derived from the frame number.
Export formats for 3D scenes
| Format | Best for | Transparency |
|---|---|---|
| MP4 (H.264) | YouTube, social media, websites, presentations | No |
| MOV (ProRes 4444) | Premiere Pro, DaVinci Resolve, Final Cut, After Effects | Yes |
| WebM (VP9) | Web pages and lightweight overlays | Yes |
| PNG sequence | Compositing and frame-by-frame editing | Yes |
Three.js to video questions
Does Three.js run on my graphics card during the render?
Yes. WebGL runs on your GPU through Direct3D on Windows, the same way it does in Chrome or Edge.
Do I need a renderFrame hook?
It is recommended for Three.js. Without it, the studio replays requestAnimationFrame on a fixed clock, which works, but a hook gives exact frames and faster, parallel renders.
Can I use post-processing, shaders and GLTF models?
Yes. EffectComposer, custom shaders, GLTF and HDR environments work like they do in the browser. Load them before the first frame.
Can I render 3D with a transparent background?
Yes. Create the renderer with alpha: true, clear with a transparent colour and export ProRes 4444 MOV, WebM or PNG frames.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.