Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Record three.js to WebM video using CCapture.js
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Record WebGL to WebM (Chrome only)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" charset="utf-8">
</head>
<body>
<div class="buttons">
<button id="start">Start recording to WebM</button>
<button id="stop">Stop (or wait 4 seconds)</button>
</div>
<!--
Thirdparty files can be found at:
https://github.com/mrdoob/three.js/blob/r80/build/three.min.js
https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js
-->
<script src="thirdparty/three.min.js"></script>
<script src="thirdparty/CCapture.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>
'use strict';
/* global THREE */
/* global CCapture */
/* eslint-disable init-declarations */
let renderer;
let scene;
let camera;
let sphere;
const recorder = new CCapture({
verbose: false,
display: true,
framerate: 60,
quality: 100,
format: 'webm',
timeLimit: 4,
frameLimit: 0,
autoSaveTime: 0
});
function render(){
sphere.rotation.x += 0.005;
sphere.rotation.y += 0.005;
renderer.render(scene, camera);
recorder.capture(renderer.domElement);
requestAnimationFrame(render);
}
function resize(width, height){
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function setupButtons(){
const $start = document.getElementById('start');
const $stop = document.getElementById('stop');
$start.addEventListener('click', e => {
e.preventDefault();
recorder.start();
$start.style.display = 'none';
$stop.style.display = 'block';
}, false);
$stop.addEventListener('click', e => {
e.preventDefault();
recorder.stop();
$stop.style.display = 'none';
recorder.save();
}, false);
}
function setupScene(width, height){
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 500);
camera.position.set(0, 0, 8);
const light0 = new THREE.PointLight(0xffffff, 1, 0);
light0.position.set(0, 200, 0);
scene.add(light0);
const light1 = new THREE.PointLight(0xffffff, 1, 0);
light1.position.set(100, 200, 100);
scene.add(light1);
const light2 = new THREE.PointLight(0xffffff, 1, 0);
light2.position.set(-100, -200, -100);
scene.add(light2);
scene.add(new THREE.AmbientLight(0x000000));
sphere = new THREE.Mesh(
new THREE.SphereGeometry(5, 16, 16),
new THREE.MeshPhongMaterial({
color: 0x156289,
emissive: 0x072534,
side: THREE.DoubleSide,
shading: THREE.FlatShading
})
);
scene.add(sphere);
}
function start(width, height){
setupScene(width, height);
setupButtons();
resize(width, height);
render();
}
start(600, 400);
html, body {
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.buttons {
position: absolute;
top: 20px;
left: 20px;
}
#stop {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.