课程表

three.js课程

工具箱
速查手册

Three 浏览器支持

当前位置:免费教程 » JS/JS库/框架 » three.js

总览

在所有现代浏览器中,Three.js可以使用WebGL来渲染场景。对于较旧的浏览器,特别是Internet Explorer 10或者更低版本浏览器,你将需要回落到其它renderers(CSS2DRenderer、CSS3DRenderer、SVGRenderer)。此外,你或许不得不包含一些额外的“填充物”来解决兼容性问题,特别是当你使用github官方首页的/examples目录中的文件时。

注意:如果你并不需要支持较旧的浏览器,那就不推荐使用其他渲染器来进行渲染,因为与WebGLRenderer相比,其它渲染器渲染较慢,并且不支持WebGL的诸多特性。

支持WebGL的浏览器

Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge。你可以点击Can I use WebGL来查阅各个浏览器对WebGL的支持性。

在Three.js中所使用到的JavaScript语言特性或者Web API

这里是一些在Three.js中使用到的特性,其中的一部分需要额外的“填充物”(Polyfills)来解决兼容性问题。

特性适用范围模块
Typed ArraysSourceBufferAttribute, BufferGeometry, etc.
Web Audio APISourceAudio, AudioContext, AudioListener, etc.
WebVR APISourceWebVRManager, etc.
BlobSourceFileLoader, etc.
PromiseExamplesGLTFLoader, GLTFExporter, WebVR, VREffect, etc.
FetchExamplesImageBitmapLoader, etc.
File APIExamplesGLTFExporter, etc.
URL APIExamplesGLTFLoader, etc.
Pointer Lock APIExamplesPointerLockControls

关于用于解决兼容性问题的“填充物”

根据你的需求,引入相关的“填充物”即可。以IE9为例,你至少需要来使用“填充物”完成以下的功能。

  • Typed Arrays

  • Blob

建议的“填充物”

WebGL兼容性检查

虽然这个问题现在已经变得越来不明显,但不可否定的是,某些设备以及浏览器直到现在仍然不支持WebGL。

以下的方法可以帮助你检测当前用户所使用的环境是否支持WebGL,如果不支持,将会向用户提示一条信息。

请将https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js引入到你的文件,并在尝试开始渲染之前先运行该文件。

if (WEBGL.isWebGLAvailable()) {
    // Initiate function or other initializations here
    animate();
} else {
    var warning = WEBGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}


转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接: NPS