THREE.js渲染器

Question

有人可以解释three.js渲染器之间的区别吗？哪一个更快？哪一个更标准，跨浏览器？ svg渲染器和dom渲染器如何工作？ 当我使用webGl而不是canvas渲染器获取下面的代码时，我有不同的结果，为什么会发生？
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
canvas和webGL之间有很大区别吗？哪一个我应该用于浏览量很高的网站？

Answer 1

如果您的目标是创建3D图形，那么您真的想要创建仅支持WebGL的应用程序。其他Three.JS渲染器更像是黑客和概念验证，而不是可以为您提供真正3D的东西。如果您的目标不是创建令人惊叹的图形，那么您可以简单地使用静态PNG图像，GIF动画或YouTube剪辑，并具有更好的向后兼容性。 <canvas>渲染后端仅适用于非常简单的图形（如没有纹理的旋转立方体），并且<canvas>作为后备在许多情况下不起作用。

• 在WebGL中创建您的独家内容

• 提供对旧版浏览器的回退

  • 使用Google Chrome浏览器内嵌框架http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq

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

例如，https://tinkercad.com/home/是仅限WebGL的Web应用程序。他们在webshaped.fi会议上的估计是，大约50％的网站受众可以访问WebGL内容。这可能听起来很低，但它仍然比在移动设备或桌面上安装应用程序的人高得多，因此使用WebGL部署3D的会话率要高于其他部署机制。

另见http://webglstats.com/

WebGL也是一种面向未来的技术 - 它不会消失。目前，您主要以桌面为目标，但在移动适应成为现实之前，只需要2到3年的时间。

Answer 2

使用 WebGLRenderer 作为其未来证明，并且imp是大多数THREE.js方法在其中工作。

例如ParticleSystem在CanvasRenderer中不起作用