|
|
@@ -0,0 +1,184 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <base href="../../" />
|
|
|
+ <script src="list.js"></script>
|
|
|
+ <script src="page.js"></script>
|
|
|
+ <link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <h1>[name]</h1>
|
|
|
+
|
|
|
+ <h2>Overview</h2>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <strong>TL;DR</strong> three.js supports most modern browsers, including Internet Explorer 11 and above.</p>
|
|
|
+ <p>
|
|
|
+ three.js provides WebGL, Canvas, SVG and CSS renderers. Different renderers may have different requirements of compatibility.
|
|
|
+ In theory, three.js works on all browsers that support WebGL: Google Chrome 9+, Firefox 4+, Opera 15+, Safari
|
|
|
+ 5.1+, Internet Explorer 11 and Microsoft Edge. More infomation can be found at
|
|
|
+ <a href="https://caniuse.com/#feat=webgl" target="_blank">Can I use WebGL?</a>.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>Internet Explorer Compatibily</h2>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ It is strongly recommended to upgrade older versions of IE to IE11. If you still need to support IE9, you can use CanvasRenderer
|
|
|
+ instead. Note that CanvasRenderer only supports a small subset of WebGLRenderer's features.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ For Internet Explorer, the table below lists avaiable renderers.
|
|
|
+ </p>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Renderer</th>
|
|
|
+ <th>IE Version</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>WebGLRenderer</td>
|
|
|
+ <td>IE11+</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>CanvasRenderer</td>
|
|
|
+ <td>IE9+</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>SVGRenderer</td>
|
|
|
+ <td>IE9+</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>CSS3DRenderer</td>
|
|
|
+ <td>IE10+</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>CSS2DRenderer</td>
|
|
|
+ <td>IE9+</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>Part of ECMAScript Language Features or Web APIs Used in three.js</h2>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ Here are some features used in three.js. Some of them may require additional polyfills.
|
|
|
+ </p>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>Feature</th>
|
|
|
+ <th>Use Scope</th>
|
|
|
+ <th>Modules</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>Typed Arrays</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>BufferAttribute, BufferGeometry, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Web Audio API</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>Audio, AudioContext, AudioListener, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>WebVR API</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>WebVRManager, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Blob</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>FileLoader, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>performance</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>Clock, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>requestAnimationFrame</td>
|
|
|
+ <td>Source</td>
|
|
|
+ <td>WebGLRenderer, VideoTexture, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Promise</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>GLTFLoader, GLTF2Loader, WEBVR, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Fetch</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>ImageBitmapLoader, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Web Workers</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>WWOBJLoader2, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>File API</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>GLTFExporter, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>URL API</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>GLTFLoader, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>TextEncoder & TextDecoder</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>FBXLoader, GLTFLoader, PCDLoaderetc, STLLoader, etc.</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>Pointer Lock API</td>
|
|
|
+ <td>Examples</td>
|
|
|
+ <td>PointerLockControls, etc.</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>Polyfills</h2>
|
|
|
+ <div>
|
|
|
+ <p>Just import polyfills base on your requirements. Taking IE9 as an example, you need to polyfill at least these features:</p>
|
|
|
+ <ul>
|
|
|
+ <li>Typed Arrays</li>
|
|
|
+ <li>Blob</li>
|
|
|
+ <li>performance</li>
|
|
|
+ <li>requestAnimationFrame</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>Suggested polyfills</h3>
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="https://github.com/zloirock/core-js" target="_blank">core-js</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank">typedarray.js</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="https://github.com/stefanpenner/es6-promise/" target="_blank">ES6-Promise</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="https://github.com/eligrey/Blob.js" target="_blank">Blob.js</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="https://gist.github.com/paulirish/5438650" target="_blank">performance</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="https://gist.github.com/paulirish/1579671" target="_blank">requestAnimationFrame</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
keqingrong