|
@@ -63,15 +63,24 @@
|
|
|
<h2>Install from CDN or static hosting</h2>
|
|
|
|
|
|
<p>
|
|
|
- The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use <em>type="module"</em> as shown below:
|
|
|
+ The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use <em>type="module"</em> as shown below.
|
|
|
+ It is also require to define an Import Map which resolves the bare module specifier *three*.
|
|
|
</p>
|
|
|
|
|
|
<code>
|
|
|
- <script type="module">
|
|
|
+ <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
|
|
|
+
|
|
|
+ <script type="importmap">
|
|
|
+ {
|
|
|
+ "imports": {
|
|
|
+ "three": "https://unpkg.com/three@<version>/build/three.module.js"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
|
|
|
- // Find the latest version by visiting https://cdn.skypack.dev/three.
|
|
|
+ <script type="module">
|
|
|
|
|
|
- import * as THREE from 'https://cdn.skypack.dev/three@<version>';
|
|
|
+ import * as THREE from 'three';
|
|
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
|
@@ -81,7 +90,9 @@
|
|
|
<p>
|
|
|
Not all features are accessed through the <em>three</em> entrypoint. Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] subfolder. To learn more, see <em>Examples</em> below.
|
|
|
</p>
|
|
|
-
|
|
|
+ <p>
|
|
|
+ Since Import maps are not yet supported by all browsers, it is necessary to add the polyfill *es-module-shims.js*.
|
|
|
+ </p>
|
|
|
|
|
|
<h2>Examples</h2>
|
|
|
|
|
@@ -107,9 +118,7 @@
|
|
|
<code>
|
|
|
<script type="module">
|
|
|
|
|
|
- // Find the latest version by visiting https://cdn.skypack.dev/three.
|
|
|
-
|
|
|
- import { OrbitControls } from 'https://cdn.skypack.dev/three@<version>/examples/jsm/controls/OrbitControls.js';
|
|
|
+ import { OrbitControls } from 'https://unpkg.com/three@<version>/examples/jsm/controls/OrbitControls.js';
|
|
|
|
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
|
|
|
|
@@ -128,16 +137,6 @@
|
|
|
While most modern JavaScript bundlers now support ES modules by default, some older build tools might not. In those cases you can likely configure the bundler to understand ES modules: [link:http://browserify.org/ Browserify] just needs the [link:https://github.com/babel/babelify babelify] plugin, for example.
|
|
|
</p>
|
|
|
|
|
|
- <h3>Import maps</h3>
|
|
|
-
|
|
|
- <p>
|
|
|
- Imported paths differ when installing from npm, as compared to installing from static hosting or a CDN. We're aware that this is an ergonomic issue for both groups of users. Developers with build tools and bundlers prefer bare package specifiers (e.g. 'three') rather than relative paths, and files in the <em>examples/</em> folder use relative references to <em>three.module.js</em> that don't follow this expectation. Those who do not use build tools — for fast prototyping, learning, or personal preference — may similarly dislike those relative imports, which require certain folder structures and are less forgiving than a global <em>THREE.*</em> namespace.
|
|
|
- </p>
|
|
|
-
|
|
|
- <p>
|
|
|
- We hope to remove these relative paths when [link:https://github.com/WICG/import-maps import maps] become broadly available, replacing them with bare package specifiers to the npm package name, 'three'. This matches build tool expectations for npm packages more closely, and allows both groups of users to write exactly the same code when importing a file. For users who prefer to avoid build tools, a simple JSON mapping can direct all imports to a CDN or static file folder. Experimentally, you can try using simpler imports today with an import map polyfill, as shown in our [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map example].
|
|
|
- </p>
|
|
|
-
|
|
|
<h3>Node.js</h3>
|
|
|
|
|
|
<p>
|