Three.js：如何将场景转换为MPG4视频？

Question

我有一个three.js场景：

var scene = new THREE.Scene();

这个场景包含许多动画对象。我的目标是将动画导出为mpg4视频。

我的问题：

1. 我如何导出场景以获得mpg4视频？
2. 我应该在客户端还是服务器端进行导出？

编辑：

我需要它在网站或基于Java的服务器上运行。请不要使用浏览器扩展程序。

- Michael

Answer 1

你可以使用这个Chrome扩展来录制<canvas>： https://chrome.google.com/webstore/detail/rendercan/enlfmgpmfaibbeoelliknejffljklemg 这将生成一个包含所有帧的压缩文件。解压该文件后，你可以使用ffmpeg将所有帧合并成一个视频，如下所示：

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

如果命令行路线让您感到害怕，我认为After Effects或类似软件也可以完成该任务。

- mrdoob

---

我需要它在网站上运行。 - Michael

哦，抱歉。那么也许你可以使用node.js编写服务器，并通过PUT发送带有时间戳的图像。 - mrdoob

然后用Java编写您的解决方案。天啊。 - gman

看起来这个 Chrome 扩展现在已经消失了。 - Zach Saucier

Answer 2

请查看此 github 存储库，我认为它恰好能够实现这一点：https://github.com/spite/ccapture.js/

- Tom

---

虽然此链接可能回答了问题，但最好在此处包含答案的必要部分并提供参考链接。仅有链接的答案如果链接页面更改则可能变得无效。-【来自审核】（/review/late-answers/30459466） - Dada

Answer 3

如果你使用FFmpeg库，你可以尝试这样做：

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源代码

- Philip