Three.js检测webgl支持并回退到常规canvas

任何使用three.js的人都可以告诉我它是否有可能检测到webgl支持，如果不存在，可以回退到标准的Canvas呈现器吗？

Answer 1

是的，这是可能的。 您可以使用CanvasRenderer而不是WebGLRenderer 。

关于WebGL检测：

1）阅读这个WebGL wiki文章： http : //www.khronos.org/webgl/wiki/FAQ

  if (!window.WebGLRenderingContext) { // the browser doesn't even know what WebGL is window.location = "http://get.webgl.org"; } else { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("webgl"); if (!context) { // browser supports WebGL but initialization failed. window.location = "http://get.webgl.org/troubleshooting"; } } 

2） Three.js已经有了WebGL检测器： https ： //github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

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

3）检查Modernizr探测器： https ： //github.com/Modernizr/Modernizr/blob/master/feature-detects/webgl.js

Answer 2

Juan Mellado指向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();