I have a three.js scene:

var scene = new THREE.Scene();

The scene contains many objects which are animated. My goal is to export the animation as a mpg4 video.

My questions:

1. How can I export a scene to get an mpg4 video?
2. Should I do the export on the client side or on the server side?

Edit:

I need it to run on a website or on a Java based server. No browser extensions please.

I have a three.js scene:

var scene = new THREE.Scene();

The scene contains many objects which are animated. My goal is to export the animation as a mpg4 video.

My questions:

1. How can I export a scene to get an mpg4 video?
2. Should I do the export on the client side or on the server side?

Edit:

I need it to run on a website or on a Java based server. No browser extensions please.

• java
• javascript
• html
• three.js
• webgl

3 Answers 3

Check this github repo, I think it does exactly that: https://github./spite/ccapture.js/

You can use this Chrome extension to record a <canvas>:

https://chrome.google./webstore/detail/rendercan/enlfmgpmfaibbeoelliknejffljklemg

This will produce a pressed file with all the frames. With that file unpressed you can use ffmpeg to bine all the frames in one single video like this:

ffmpeg -r 60 -i canvas-%09d.png out.mp4

If the mand line route intimidates you, I think After Effects or similar allow you to do that too.

If you use the FFmpeg library you could try something like:

for ( let i = 0; i < frames; i ++ ) {

    player.render( currentTime );

    const num = i.toString().padStart( 5, '0' );
    ffmpeg.FS( 'writeFile', `tmp.${num}.png`, await fetchFile( canvas.toDataURL() ) );
    currentTime += 1 / fps;

    progress.setValue( ( i / frames ) * 0.5 );

}

Github Source