手軽にcanvasをキャプチャする。CCapture.js

まずは ccapture.js からDownload ZIPしてください。

今回は、CCapture.all.min.jsを使用します。

htmlに追加します。

<script src="CCapture.all.min.js"></script>

jsに追加します。

// formatは、WebM, gif, png, jpgがあります。
// framerateは、そのまま記録したいフレームレートです。
// verboseは、コンソールに情報を出してくれます。
// nameは、出力するファイルの名前です。
// timeLimitは、記録が開始されて止まるまでの時間(秒)です。
var capturer = new CCapture({
  format: 'webm',
  framerate: 60,
  verbose: true,
  name: 01,
  timeLimit: 20
});

var canvas = document.getElementById("element").appendChild( renderer.domElement );

// キャプチャ開始。
capturer.start();

// レンダー内に記述。
function render() {
  requestAnimationFrame(render);
  renderer.render( scene, camera );
  capturer.capture(canvas);
}

後は実行するとキャプチャされます。

macのsafariでエラーが出る場合があるようです。chrome等で試してみてください。
three.js用に書いてあります。メモに近いので短い記事でした。