Javascript Three.js检测webgl支持并回退到常规画布

任何使用过three.js的人都可以告诉我是否可以检测webgl支持，如果不存在，可以退回到标准画布渲染吗？

是的，这是可能的。您可以使用

canvasrender

而不是

WebGLRenderer

关于WebGL检测：

1）阅读此WebGL wiki文章：

2）Three.js已经有一个WebGL检测器：

3）同时检查Modernizer检测器：

---

胡安·梅拉多指向Three.js探测器的指针非常有用，但我不想把整个文件都带到我的项目中。下面是提取的Detector.webgl（）函数

function webglAvailable() {
    try {
        var canvas = document.createElement("canvas");
        return !!
            window.WebGLRenderingContext && 
            (canvas.getContext("webgl") || 
                canvas.getContext("experimental-webgl"));
    } catch(e) { 
        return false;
    } 
}

它的用法与他的例子类似：

renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();

---

不幸的是，仅仅检测WebGL支持并不意味着它会有任何好处。WebGL可以由“google swiftshader”等软件渲染器或“mesa 3D”等部分仿真支持。特别是对于像Mesa 2D这样的优秀2D渲染器，即使WebGL似乎可用，手动选择画布也是有意义的。

如果浏览器支持WebGL，但由于某种原因无法使用它，方法1/3将失败（如驱动程序被列入黑名单），这就是为什么方法2使用带有try/catch块的函数，并检查上下文是否可以实际创建。值得注意的是，

Detector.js

已经移动，现在处于

function webglAvailable() {
    try {
        var canvas = document.createElement("canvas");
        return !!
            window.WebGLRenderingContext && 
            (canvas.getContext("webgl") || 
                canvas.getContext("experimental-webgl"));
    } catch(e) { 
        return false;
    } 
}

renderer = webglAvailable() ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();