Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
Browser-support.html 4.5 KB
Newer Older
M
r124  
Mr.doob 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <base href="../../../" />
    <script src="page.js"></script>
    <link type="text/css" rel="stylesheet" href="page.css" />
</head>

<body>
    <h1>브라우저 지원([name])</h1>

    <h2>개요</h2>
    <div>
        <p>
            Three.js 는 WebGL을 통해 대부분의 현대 브라우저에서 scene을 렌더링할 수 있습니다. 오래된 브라우저, 특히 Internet Explorer 10 이하 버전에서는 다른
            [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm/renderers 렌더러] (CSS2DRenderer,
            CSS3DRenderer, SVGRenderer)를 사용해야 합니다. 또한,
            polyfills를 몇가지 포함해야 할 수도 있는데 [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] 폴더의
            파일을 불러올때에는 필수입니다.
        </p>
        <p>
            오래된 브라우저를 지원할 필요가 없다면, 다른 렌더러를 사용하는 것은 추천하지 않습니다. WebGLRenderer보다 느릴뿐더러 더 적은 기능을 지원하기 때문입니다.
        </p>
    </div>

    <h2>WebGL지원 웹 브라우저</h2>
    <div>
        <p>
            Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 및 Microsoft Edge. [link:https://caniuse.com/#feat=webgl Can I use WebGL]에서 어떤 브라우저들이 지원하는지 확인해볼 수 있습니다.
        </p>
    </div>

    <h2>JavaScript 언어 특성 및 three.js에서 사용된 Web API</h2>
    <div>
        <p>
            three.js에서 사용된 특성들은 다음과 같습니다. 이 중 몇개는 추가로 polyfills가 필요합니다.
        </p>
        <table>
            <thead>
                <tr>
                    <th>특성</th>
                    <th>사용 범위</th>
                    <th>모듈</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>WebXR Device API</td>
                    <td>Source</td>
                    <td>WebXRManager</td>
                </tr>
                <tr>
                    <td>Blob</td>
                    <td>Source</td>
                    <td>FileLoader, etc.</td>
                </tr>
                <tr>
                    <td>Promise</td>
                    <td>Examples</td>
                    <td>GLTFLoader, DRACOLoader, BasisTextureLoader, GLTFExporter, VRButton, ARButton, etc.</td>
                </tr>
                <tr>
                    <td>Fetch</td>
                    <td>Examples</td>
                    <td>ImageBitmapLoader, 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>Pointer Lock API</td>
                    <td>Examples</td>
                    <td>PointerLockControls</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h2>Polyfills</h2>
    <div>
        <p>필요에 따라 polyfills을 import 하세요. IE9를 예로들면 적어도 다음과 같은 polyfills가 필요할 것입니다.
            these features:</p>
        <ul>
            <li>Typed Arrays</li>
            <li>Blob</li>
        </ul>
    </div>

    <h3>추천 polyfills</h3>
    <div>
        <ul>
            <li>
                [link:https://github.com/zloirock/core-js core-js]
            </li>
            <li>
                [link:https://github.com/inexorabletash/polyfill/blob/master/typedarray.js typedarray.js]
            </li>
            <li>
                [link:https://github.com/stefanpenner/es6-promise/ ES6-Promise]
            </li>
            <li>
                [link:https://github.com/eligrey/Blob.js Blob.js]
            </li>
            <li>
                [link:https://github.com/github/fetch fetch]
            </li>
        </ul>
    </div>
</body>

</html>