javascript - 如何使用 Canvas 制作 3D 动画

Question

我有 Canvas 2D 上下文的背景，但我想执行像这样的 3D 动画，Three.js 库是执行此类动画的最佳选择吗？您能否指出一些有用的教程或文档可能会有所帮助。提前谢谢。

Answer 1

这是最常见的选择之一。

由于 WebGL 无需库即可启用 OpenGL，因此您也可以仅使用Vanilla JS来实现，但这会更难，因为 WebGL 并没有提供比原始 OpenGL 更多的改进。

除了 three.js，你也可以尝试GLGE或PhiloGL，但由于Three.js是最受欢迎的，如果你没有特定要求，我建议你去尝试。

Answer 2

看起来您链接到的演示使用了一个名为 Clay.js 的画布库。到目前为止，我还没有亲自听说过。对于画布中的 3d，我所知道的最流行的就是 Three.js，正如你已经提到的。它还具有支持 webGL 的好处（基于浏览器的 openGL 变体）。

Three.js 有有限的文档和一些 示例，但除了一些您可能会购买的书籍之外，没有太多的手把手。您基本上需要潜入并开始编码。以下是一些可以帮助您入门的在线资源（不一定都专注于 THREE.js）：

http://aerotwist.com/tutorials/getting-started-with-three-js/

http://learningthreejs.com/

http://learningwebgl.com/blog/

为了更轻松地使用 THREE.js，Jérôme Etienne 创建了一个名为tQuery的项目，您可以认为它有点像 jQuery。一个让你更容易弄脏手的包装纸。这是一个视频，他展示了如何在 10 分钟内创建一个 webGL 游戏。