Render three.js project to a movie

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:

4 Likes

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

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

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`

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

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