canvas - 三个.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 渲染器更像是 hack 和概念验证，而不是可以为您提供真正 3D 的东西。如果您的目标不是创建令人惊叹的图形，那么您可以简单地使用静态 PNG 图像、GIF 动画或 YouTube 剪辑，并具有更好的向后兼容性。 <canvas>渲染后端仅对非常简单的图形有用(例如没有纹理的旋转立方体)并具有 <canvas>因为在许多情况下后备是行不通的。

在 WebGL 中创建您的独家内容

提供对旧版浏览器的回退

使用谷歌浏览器框架 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq

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

例如， https://tinkercad.com/home/是 WebGL 唯一的 Web 应用程序。他们在 webshape.fi session 上的估计是，大约 50% 的网站观众可以访问 WebGL 内容。这听起来可能很低，但仍然比在手机或桌面上安装应用程序的人高得多，因此使用 WebGL 部署 3D 的对话率高于通过其他部署机制。

另见 http://webglstats.com/

WebGL 也是一种面向 future 的技术——它不会消失。目前你主要针对桌面，但移动适应成为现实只是时间问题，2-3 年。