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

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

是的,这是可能的。 您可以使用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

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();