Render three.js project to a movie

Resources
1

I just published an example repository for transforming your three.js projects into a movie.

I used enable3d as a wrapper to quickly get a scene and some 3d physics.

The rendering works completely headless.

Here the result:

6 Likes
2

The video in the readme doesn’t work in Firefox. Works fine in Chrome though.

1
11037×898 15.6 KB

It’s possible to use FFMPEG in the browser, that would give your more compatible videos probably.

3

Do you know how to make the output more compatible?

Currently I’m using:

const cmd = `ffmpeg -y -r 30 -f image2 -i "${join('screenshots', 'frame%04d.png')}" -vcodec libx264 output.mp4`
4

Oh, you’re already using it :sweat_smile:

Sorry, I’m not that familiar with that tool. But the three.js editor also uses it, you could try those settings:

1 Like
5

Oh wow. I did not know that the editor has such a feature. I have never used the editor.

I have updated my code and it seems to work now :smiley:

const cmd = `ffmpeg -y -r 30 -f image2 -start_number 1 -i "${join(
  'screenshots',
  'frame%04d.png'
)}" -c:v libx264 -pix_fmt yuv420p -preset slow -crf 16 output.mp4`
1 Like