THREE.js 渲染器

Question

请问有人能够解释一下three.js的三种渲染器之间的区别吗？哪一个更快？哪一个更标准和跨浏览器？SVG渲染器和DOM渲染器是如何工作的呢？ 当我在以下代码中使用WebGL而不是画布渲染器时，会得到不同的结果，这是为什么？
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
画布和WebGL之间有很大的区别吗？对于一个高流量的网站，我应该使用哪一个？

- Erfan

---

这取决于你想要绘制什么...我认为正如它的名字所示，WebGL渲染器使用OpenGL，因此更快（因为它使用GPU），而Canvas和SVG较弱，因为它们计算3D->2D转换，并且不支持所有对象... - EliSherer

我想绘制一些复杂的3D物品，因此WebGL可能更有用，但是有很多浏览器不支持WebGL。 - Erfan

Answer 1

如果你的目标是创建3D图形，则应该仅支持WebGL创建应用程序。其他Three.JS渲染器更像是一些技术探究，而不是能够提供真正3D效果的东西。如果你的目标不是创建令人惊叹的图形，那么可以简单地使用静态PNG图像、GIF动画或YouTube剪辑，并具有更好的向后兼容性。 <canvas>渲染后端仅适用于非常简单的图形（如没有纹理的旋转立方体），而将<canvas>作为备选方案在许多情况下无法起作用。

• 使用WebGL创建独特内容

• 为旧版浏览器提供备选方案

  • 使用Google Chrome Frame http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq

  • 如果旧版浏览器用户不想在其旧版浏览器中安装Chrome Frame插件，则只需将它们重定向到静态图像和静态文本内容即可

例如，https://tinkercad.com/home/是仅支持WebGL的网络应用程序。他们在webshaped.fi会议上估计，约有50％的站点观众可以访问WebGL内容。这听起来可能很低，但它仍远高于安装应用程序的移动设备或台式机用户数量，因此使用WebGL部署3D的转化率比其他部署机制要高。

此外，请参见http://webglstats.com/ WebGL还是一种未来技术 - 它不会消失。目前，你主要以桌面用户为目标，但移动端适配成为现实只是时间问题，可能需要2-3年的时间。

- Mikko Ohtamaa

---

好的。谢谢，那我会用Web GL，但是你知道SVG渲染器和DOM渲染器是什么吗？ - Erfan

它们是使用HTML元素进行概念验证渲染的，不会产生您希望在实际应用中使用的渲染结果。我预计它们将来会从Three.js核心中删除。 - Mikko Ohtamaa

Answer 2

我建议选择WebGLRenderer作为未来的技术支持，因为大多数THREE.js方法都适用于它。比如，ParticleSystem在CanvasRenderer中不起作用。

- STEEL