Update manual (examples -> addons) (#24888)

* Change imports

* Fix links

* More fixes

* Fix merge conflicts

* Fix merge conflicts

* More fixes

* Rename Examples -> Addons in docs also

* Update English versions of fundamentals.html and prerequisites.html

docs/list.json

@@ -327,7 +327,7 @@
 
 		},
 
-		"Examples": {
+		"Addons": {
 
 			"Animations": {
 				"CCDIKSolver": "examples/en/animations/CCDIKSolver",
@@ -829,7 +829,7 @@
 
 		},
 
-		"示例": {
+		"Addons": {
 
 			"动画": {
 				"CCDIKSolver": "examples/zh/animations/CCDIKSolver",
@@ -1065,7 +1065,7 @@
 
 		},
 
-		"예제": {
+		"Addons": {
 
 			"컨트롤": {
 				"DragControls": "examples/ko/controls/DragControls",

manual/en/align-html-elements-to-3d.html

@@ -56,8 +56,8 @@ by styled with CSS. It can also be selected by the user as it is actual text. </
 <p>Let's start simple. We'll make a 3D scene with a few primitives and then add a label to each primitive. We'll start
 with an example from <a href="responsive.html">the article on responsive pages</a> </p>
 <p>We'll add some <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> like we did in <a href="lights.html">the article on lighting</a>.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 0, 0);
@@ -659,9 +659,9 @@ for (const countryInfo of countryInfos) {
 </pre>
 <p>Finally, since I'm not sure what good values are for these settings lets
 add a GUI so we can play with them</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const settings = {
 +  minArea: 20,

manual/en/backgrounds.html

@@ -189,7 +189,7 @@ scene's background.</p>
 }
 </pre>
 <p>Let's add some controls in so we can rotate the camera.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // the canvas default

manual/en/canvas-textures.html

@@ -260,8 +260,8 @@ tall and however wide is needed to fit the text.</p>
 </pre>
 <p>What's left is to add some <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> so we can move
 the camera.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // the canvas default

manual/en/fundamentals.html

@@ -116,13 +116,12 @@ that looks like this</p>
 
 <p>First let's load three.js</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 &lt;/script&gt;
 </pre>
 <p>It's important you put <code class="notranslate" translate="no">type="module"</code> in the script tag. This enables
-us to use the <code class="notranslate" translate="no">import</code> keyword to load three.js. There are other ways
-to load three.js but as of r106 using modules is the recommended way.
-Modules have the advantage that they can easily import other modules
+us to use the <code class="notranslate" translate="no">import</code> keyword to load three.js. As of r147, this is the
+only way to load three.js properly. Modules have the advantage that they can easily import other modules
 they need. That saves us from having to manually load extra scripts
 they are dependent on.</p>
 <p>Next we need is a <code class="notranslate" translate="no">&lt;canvas&gt;</code> tag so...</p>
@@ -132,7 +131,7 @@ they are dependent on.</p>
 </pre>
 <p>We will ask three.js to draw into that canvas so we need to look it up.</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
@@ -365,69 +364,86 @@ a different color.</p>
 making our code responsive so it is adaptable to multiple situations</a>.</p>
 <div id="es6" class="threejs_bottombar">
 <h3>es6 modules, three.js, and folder structure</h3>
-<p>As of version r106 the preferred way to use three.js is via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">es6 modules</a>.</p>
+<p>As of version r147 the preferred way to use three.js is via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">es6 modules</a> and import maps.</p>
 <p>
 es6 modules can be loaded via the <code class="notranslate" translate="no">import</code> keyword in a script
-or inline via a <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tag. Here's an example of
-both
+or inline via a <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tag. Here's an example
 </p>
-<pre class="prettyprint">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
+import * as THREE from 'three';
 
 ...
 
 &lt;/script&gt;
 </pre>
 <p>
-Paths must be absolute or relative. Relative paths always start with <code class="notranslate" translate="no">./</code> or <code class="notranslate" translate="no">../</code>
-which is different than other tags like <code class="notranslate" translate="no">&lt;img&gt;</code> and <code class="notranslate" translate="no">&lt;a&gt;</code>.
+Notice <code class="notranslate" translate="no">'three'</code> specifier there. If you leave it as it is, it will likely produce an error. An <i>import map</i> should be used to tell the browser where to find three.js
+</p>
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "three": "./path/to/three.module.js"
+  }
+}
+&lt;/script&gt;
+</pre>
+<p>
+Note that path specifier can start only with <code class="notranslate" translate="no">./</code> or <code class="notranslate" translate="no">../</code>.
 </p>
 <p>
-References to the same script will only be loaded once as long as their absolute paths
-are exactly the same. For three.js this means it's required that you put all the examples
-libraries in the correct folder structure
+Import maps are still unsupported in Firefox and Safari, so it is recommended to use <a href="https://github.com/guybedford/es-module-shims">an import maps polyfill</a> like so
 </p>
-<pre class="dos">someFolder
- |
- ├-build
- | |
- | +-three.module.js
- |
- +-examples
-   |
-   +-jsm
-     |
-     +-controls
-     | |
-     | +-OrbitControls.js
-     | +-TrackballControls.js
-     | +-...
-     |
-     +-loaders
-     | |
-     | +-GLTFLoader.js
-     | +-...
-     |
-     ...
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"&gt;&lt;/script&gt;</pre>
+<p>
+To import addons like <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js"><code class="notranslate" translate="no">OrbitControls.js</code></a> use the following
+</p>
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>
-The reason this folder structure is required is because the scripts in the
-examples like <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js"><code class="notranslate" translate="no">OrbitControls.js</code></a>
-have hard coded relative paths like
+Don't forget to add addons to the import map like so
 </p>
-<pre class="prettyprint">import * as THREE from '../../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "three": "./path/to/three.module.js",
+    "three/addons/": "./different/path/to/examples/jsm/"
+  }
+}
+&lt;/script&gt;
 </pre>
 <p>
-Using the same structure assures then when you import both three and one of the example
-libraries they'll both reference the same <code class="notranslate" translate="no">three.module.js</code> file.
+You can also use a CDN
 </p>
-<pre class="prettyprint">import * as THREE from './someFolder/build/three.module.js';
-import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "three": "https://unpkg.com/[email protected]/build/three.module.js",
+    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+  }
+}
+&lt;/script&gt;
 </pre>
-<p>This includes when using a CDN. Be sure your path to <code class="notranslate" translate="no">three.module.js</code> ends with
-<code class="notranslate" translate="no">/build/three.modules.js</code>. For example</p>
-<pre class="prettyprint">import * as THREE from 'https://unpkg.com/[email protected]<b>/build/three.module.js</b>';
-import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+<p>
+To conclude, the recommended way of using three.js is
+</p>
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"&gt;&lt;/script&gt;
+
+&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "three": "./path/to/three.module.js",
+    "three/addons/": "./different/path/to/examples/jsm/"
+  }
+}
+&lt;/script&gt;
+
+&lt;script type="module"&gt;
+import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+
+...
+
+&lt;/script&gt;
 </pre>
 </div>
 

manual/en/game.html

@@ -234,10 +234,10 @@ we instead want to clone the scene and in particular we want to clone
 it for skinned animated characters. Fortunately there's a utility function,
 <code class="notranslate" translate="no">SkeletonUtils.clone</code> we can use to do this. So, first we need to include
 the utils.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from '/examples/jsm/loaders/GLTFLoader.js';
-+import * as SkeletonUtils from '/examples/jsm/utils/SkeletonUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
++import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 </pre>
 <p>Then we can clone the models we just loaded</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
@@ -1513,11 +1513,11 @@ class StateDisplayHelper extends Component {
 </pre>
 <p>While we're at it lets make it so we can turn them on/off using lil-gui like
 we've used else where</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from '/examples/jsm/loaders/GLTFLoader.js';
-import * as SkeletonUtils from '/examples/jsm/utils/SkeletonUtils.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
+import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const gui = new GUI();
 +gui.add(globals, 'debug').onChange(showHideDebugInfo);

manual/en/lights.html

@@ -50,8 +50,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 or <em>orbit</em> the camera around some point. The <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> are
 an optional feature of three.js so first we need to include them
 in our page</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>Then we can use them. We pass the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> a camera to
 control and the DOM element to use to get input events</p>
@@ -422,9 +422,9 @@ fluorescent light or maybe a frosted sky light in a ceiling.</p>
 </pre>
 <p>To use the <a href="/docs/#api/en/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a> we need to include some extra three.js optional data and we'll
 include the <a href="/docs/#api/en/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a> to help us visualize the light</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {RectAreaLightUniformsLib} from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {RectAreaLightUniformsLib} from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <p>and we need to call <code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code></p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {

manual/en/load-gltf.html

@@ -112,10 +112,10 @@ mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
 </pre>
 <p>I kept the auto framing code as before</p>
 <p>We also need to include the <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a> and we can get rid of the <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>.</p>
-<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from '/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
--import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
-+import {GLTFLoader} from '/examples/jsm/loaders/GLTFLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from 'three/addons/loaders/LoaderSupport.js';
+-import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+-import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
++import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 </pre>
 <p>And running that we get</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/en/load-obj.html

@@ -66,7 +66,7 @@ the hemispherical lighting example so I ended up with one
 related to adjusting the lights. I also removed the cube and sphere
 that were being added to the scene.</p>
 <p>From that the first thing we need to do is include the <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> loader in our script.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 </pre>
 <p>Then to load the .OBJ file we create an instance of <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>,
 pass it the URL of our .OBJ file, and pass in a callback that adds
@@ -148,10 +148,10 @@ file to.</p>
 
 <p>Now that we have the textures available we can load the .MTL file.</p>
 <p>First we need to include the <a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a>;</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
-+import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
++import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 </pre>
 <p>Then we first load the .MTL file. When it's finished loading we add
 the just loaded materials on to the <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> itself via the <code class="notranslate" translate="no">setMaterials</code>

manual/en/multiple-scenes.html

@@ -411,7 +411,7 @@ function render(time) {
 <p></p>
 <h2 id="adding-controls-to-each-element">Adding Controls to each element</h2>
 <p>Adding interactively, for example a <code class="notranslate" translate="no">TrackballControls</code> is just as easy. First we add the script for the control.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from '/examples/jsm/controls/TrackballControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
 </pre>
 <p>And then we can add a <code class="notranslate" translate="no">TrackballControls</code> to each scene passing in the element associated with that scene.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {

manual/en/offscreencanvas.html

@@ -258,7 +258,7 @@ the split of our previous <code class="notranslate" translate="no">offscreencanv
 copy all of <code class="notranslate" translate="no">offscreencanvas-cubes.js</code> to <code class="notranslate" translate="no">shared-cube.js</code>. Then
 we rename <code class="notranslate" translate="no">main</code> to <code class="notranslate" translate="no">init</code> since we already have a <code class="notranslate" translate="no">main</code> in our
 HTML file and we need to export <code class="notranslate" translate="no">init</code> and <code class="notranslate" translate="no">state</code></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
 
 -const state = {
 +export const state = {
@@ -609,7 +609,7 @@ events and pass them on using events that have the same structure
 as the original DOM events so the OrbitControls won't be able to
 tell the difference.</p>
 <p>Here's the code for the worker part.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from 'three';
 
 class ElementProxyReceiver extends EventDispatcher {
   constructor() {
@@ -683,8 +683,8 @@ self.onmessage = function(e) {
 };
 </pre>
 <p>In our shared three.js code we need to import the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> and set them up.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 export function init(data) {
 -  const {canvas} = data;

manual/en/optimize-lots-of-objects-animated.html

@@ -354,10 +354,10 @@ have. We could also write some custom animation code which would be easy but
 because the original webgl globe uses 
 <a href="https://github.com/tweenjs/tween.js/">an animation library</a> let's use the same one here.</p>
 <p>We need to include the library</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {TWEEN} from '/examples/jsm/libs/tween.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {TWEEN} from 'three/addons/libs/tween.min.js';
 </pre>
 <p>And then create a <code class="notranslate" translate="no">Tween</code> to animate the influences.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// show the selected data, hide the rest

manual/en/optimize-lots-of-objects.html

@@ -404,7 +404,7 @@ geometry we might as well do it once instead of twice.</p>
 <code class="notranslate" translate="no">BufferGeometryUtils.mergeBufferGeometries</code> which will combined all of
 them into a single mesh.</p>
 <p>We also need to include the <code class="notranslate" translate="no">BufferGeometryUtils</code></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 </pre>
 <p>And now, at least on my machine, I get 60 frames per second</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/en/post-processing.html

@@ -103,10 +103,10 @@ composer.addPass(filmPass);
 true to tell it to render to the canvas. Without setting this it would instead
 render to the next render target.</p>
 <p>To use these classes we need to import a bunch of scripts.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from '/examples/jsm/postprocessing/EffectComposer.js';
-import {RenderPass} from '/examples/jsm/postprocessing/RenderPass.js';
-import {BloomPass} from '/examples/jsm/postprocessing/BloomPass.js';
-import {FilmPass} from '/examples/jsm/postprocessing/FilmPass.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
+import {BloomPass} from 'three/addons/postprocessing/BloomPass.js';
+import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
 </pre>
 <p>For pretty much any post processing <code class="notranslate" translate="no">EffectComposer.js</code>, and <code class="notranslate" translate="no">RenderPass.js</code>
 are required.</p>
@@ -173,7 +173,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 </pre>
 <p>So which makes it pretty clear how to set them.</p>
 <p>Let's make a quick GUI to set those values</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>and</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();

manual/en/prerequisites.html

@@ -35,7 +35,7 @@ They assume you know how to program in JavaScript. They assume
 you know what the DOM is, how to write HTML as well as create DOM elements
 in JavaScript. They assume you know how to use
 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">es6 modules</a> 
-via import and via <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tags.
+via import and via <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tags. They assume you know how to use import maps.
 They assume you know some CSS and that you know what
 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selectors are</a>. 
 They also assume you know ES5, ES6 and maybe some ES7.
@@ -44,18 +44,27 @@ They assume you know what a closure is.</p>
 <p>Here's some brief refreshers and notes</p>
 <h2 id="es6-modules">es6 modules</h2>
 <p>es6 modules can be loaded via the <code class="notranslate" translate="no">import</code> keyword in a script
-or inline via a <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tag. Here's an example of
-both</p>
-<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+or inline via a <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> tag. Here's an example</p>
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"&gt;&lt;/script&gt;
+
+&lt;script type="importmap"&gt;
+{
+  "imports": {
+    "three": "./path/to/three.module.js",
+    "three/addons/": "./different/path/to/examples/jsm/"
+  }
+}
+&lt;/script&gt;
+
+&lt;script type="module"&gt;
+import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 ...
 
 &lt;/script&gt;
 </pre>
-<p>Paths must be absolute or relative. Relative paths always start with <code class="notranslate" translate="no">./</code> or <code class="notranslate" translate="no">../</code>
-which is different than other tags like <code class="notranslate" translate="no">&lt;img&gt;</code> and <code class="notranslate" translate="no">&lt;a&gt;</code> and css references.</p>
-<p>More details are mentioned at the bottom of <a href="fundamentals.html">this article</a>.</p>
+<p>See more details at the bottom of <a href="fundamentals.html">this article</a>.</p>
 <h2 id="-document-queryselector-and-document-queryselectorall-"><code class="notranslate" translate="no">document.querySelector</code> and <code class="notranslate" translate="no">document.querySelectorAll</code></h2>
 <p>You can use <code class="notranslate" translate="no">document.querySelector</code> to select the first element
 that matches a CSS selector. <code class="notranslate" translate="no">document.querySelectorAll</code> returns

manual/en/rendering-on-demand.html

@@ -50,8 +50,8 @@ or the camera or giving other relevant input.</p>
 and modify it to render on demand.</p>
 <p>First we'll add in the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> so there is something that could change
 that we can render in response to.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>and set them up</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
@@ -174,9 +174,9 @@ below slides.</p>
 
 <p></p>
 <p>Let's also add a simple lil-gui GUI and make its changes render on demand.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>Let's allow setting the color and x scale of each cube. To be able to set the
 color we'll use the <code class="notranslate" translate="no">ColorGUIHelper</code> we created in the <a href="lights.html">article on

manual/en/textures.html

@@ -468,7 +468,7 @@ const material = new THREE.MeshBasicMaterial({
 });
 </pre>
 <p>Then we'll use <a href="https://github.com/georgealways/lil-gui">lil-gui</a> again to provide a simple interface.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>As we did in previous lil-gui examples we'll use a simple class to
 give lil-gui an object that it can manipulate in degrees

manual/en/transparency.html

@@ -366,9 +366,9 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
     .onChange(requestRenderIfNotRequested);
 </pre>
 <p>and of course we need to include lil-gui</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>and here's the results</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/en/webxr-basics.html

@@ -68,8 +68,8 @@ so that you can see console warnings, errors, and of course actually
 this site.</p>
 <p>The first thing we need to do is include the VR support after
 including three.js</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {VRButton} from '/examples/jsm/webxr/VRButton.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {VRButton} from 'three/addons/webxr/VRButton.js';
 </pre>
 <p>Then we need to enable three.js's WebXR support and add its
 VR button to our page</p>
@@ -380,4 +380,4 @@ cover some of the input methods in <a href="webxr-look-to-select.html">future ar
 
 
 
-</body></html>
+</body></html>

manual/fr/fundamentals.html

@@ -116,7 +116,7 @@ nombre minimum d'élements Three.js :</p>
 
 <p>Tout d'abord, chargeons Three.js :</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from './resources/threejs/r130/build/three.module.js';
+import * as THREE from 'three';
 &lt;/script&gt;
 </pre>
 <p>Il est important d'écrire <code class="notranslate" translate="no">type="module"</code> dans la balise script.
@@ -133,7 +133,7 @@ facilement importer les autres modules dont ils ont besoin. Cela nous
 <p>Nous allons demander à Three.js de dessiner dans ce canevas donc nous devons le rechercher
 dans le document html :</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
@@ -368,7 +368,7 @@ Ils sont chargés via le mot-clé <code class="notranslate" translate="no">impor
 par le biais d'une balise <code class="notranslate" translate="no">&lt;script type="module"&gt;</code>. Voici un exemple d'utilisation avec les deux :
 </p>
 <pre class="prettyprint">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 
@@ -421,12 +421,12 @@ Three.js et d'une autre bibliothèque d'exemple, qu'ils référenceront le même
 three.module.js.
 </p>
 <pre class="prettyprint">import * as THREE from './someFolder/build/three.module.js';
-import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from './someFolder/addons/controls/OrbitControls.js';
 </pre>
 <p>Cela est valable aussi lors de l'utilisation d'un CDN. Assurez vous que vos chemins versThis includes when using a CDN. Be  <code class="notranslate" translate="no">three.modules.js</code> terminent par
 <code class="notranslate" translate="no">/build/three.modules.js</code>. Par exemple :</p>
 <pre class="prettyprint">import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
-import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from 'https://unpkg.com/[email protected]/addons/controls/OrbitControls.js';
 </pre>
 </div>
 

manual/fr/lights.html

@@ -43,8 +43,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 +camera.position.set(0, 10, 20);
 </pre>
 <p>Ajoutons ensuite <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>. <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> permet à l'utilisateur de tourner ou de mettre la caméra en <em>orbite</em> autour d'un certain point. Il s'agit d'une fonctionnalité facultative de Three.js, nous devons donc d'abord l'importer</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>Ensuite, nous pouvons l'utiliser. Nous passons à <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> une caméra à contrôler et l'élément DOM à utiliser.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controls = new OrbitControls(camera, canvas);
@@ -345,9 +345,9 @@ en radians. Utilisons notre <code class="notranslate" translate="no">DegRadHelpe
 }
 </pre>
 <p>Pour utiliser <a href="https://threejs.org/docs/#api/en/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a> nous devons importer <a href="https://threejs.org/docs/#api/en/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a> pour nous aider à voir la lumière.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {RectAreaLightUniformsLib} from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {RectAreaLightUniformsLib} from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <p>et nous devons appeler <code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code></p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {

manual/fr/prerequisites.html

@@ -50,7 +50,7 @@ que ce soit via le mot clef import ou via les balises <code class="notranslate"
 <p>Les modules es6 peuvent être chargé via le mot-clé <code class="notranslate" translate="no">import</code> dans un script
 ou en ligne via une balise <code class="notranslate" translate="no">&lt;script type="module"&gt;</code>. Voici un exemple des deux</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 

manual/fr/textures.html

@@ -380,7 +380,7 @@ const material = new THREE.MeshBasicMaterial({
 });
 </pre>
 <p>Ensuite, utilisons <a href="https://github.com/georgealways/lil-gui">lil-gui</a> pour fournir une interface simple.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>Comme nous l'avons fait dans les exemples précédents avec lil-gui, nous utiliserons une classe simple pour donner à lil-gui un objet qu'il peut manipuler en degrés mais qu'il définira en radians.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class DegRadHelper {

manual/ja/align-html-elements-to-3d.html

@@ -58,8 +58,8 @@ HTMLは複数の要素を持てます。
 いくつかのプリミティブで3Dシーンを作り、それぞれのプリミティブにラベルを付けます。
 <a href="responsive.html">レスポンシブの記事</a>の例を使います。</p>
 <p><a href="lights.html">ライティングの記事</a>のように <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> を追加します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 0, 0);
@@ -636,9 +636,9 @@ for (const countryInfo of countryInfos) {
 </pre>
 <p>私にはこの設定のための良い値が何か分からないです。
 値を操作できるようにGUIを追加します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const settings = {
 +  minArea: 20,

manual/ja/backgrounds.html

@@ -177,7 +177,7 @@ CSSの時と比べて目に見える違いはありませんが、<a href="post-
 }
 </pre>
 <p>カメラを回転できるようにコントロールを追加してみましょう。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OrbitControls} from './resources/threejs/r119/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // the canvas default
@@ -247,4 +247,4 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 
 
-</body></html>
+</body></html>

manual/ja/canvas-textures.html

@@ -253,8 +253,8 @@ cubes.push(cube);  // add to our list of cubes to rotate
 +makePerson(+3, 32, 'Red Menace', 'red');
 </pre>
 <p>残作業はカメラを動かせるように <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> を追加します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // the canvas default

manual/ja/fundamentals.html

@@ -52,7 +52,7 @@ three.jsがサポートするほとんどのブラウザは自動更新される
 </pre>
 <p>Three.jsはcanvasに描画するため、canvasをthree.jsに渡す必要があります。</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -256,7 +256,7 @@ es6モジュールはスクリプトのロードに <code class="notranslate" tr
 両方とも以下に例を示します。
 </p>
 <pre class="prettyprint">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 
@@ -303,11 +303,11 @@ three.jsの場合、すべてのexamplesを正しいフォルダ階層に入れ
 同じフォルダ構造を使用すると、importしたthreeとexampleライブラリは両方とも同じthree.module.jsを参照します。
 </p>
 <pre class="prettyprint">import * as THREE from './someFolder/build/three.module.js';
-import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from './someFolder/addons/controls/OrbitControls.js';
 </pre>
 <p>これにはCDNを使用する場合も含まれます。 <code class="notranslate" translate="no">three.modules.js</code> のパスが <code class="notranslate" translate="no">/build/three.modules.js</code> のようになってる事を確認して下さい。例えば</p>
 <pre class="prettyprint">import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
-import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from 'https://unpkg.com/[email protected]/addons/controls/OrbitControls.js';
 </pre>
 </div>
 

manual/ja/lights.html

@@ -47,8 +47,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 <p>次に <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> を追加します。
 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> は、カメラをある点を中心に<em>軌道</em>を回転できます。
 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> はthree.jsのオプション機能なので、importする必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>これでOrbitControlsを利用できます。
 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> にカメラと入力イベントを取得するDOM要素を渡します。</p>
@@ -379,9 +379,9 @@ scene.add(helper);
 </pre>
 <p><a href="/docs/#api/ja/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a> を使用するには、three.jsから追加のimportが必要です。
 ライトを可視化するために <a href="/docs/#api/ja/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a> をimportします。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {RectAreaLightUniformsLib} from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {RectAreaLightUniformsLib} from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <p><code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code> を呼び出します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {

manual/ja/load-gltf.html

@@ -106,10 +106,10 @@ mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
 </pre>
 <p>自動フレーミングのコードは以前のままです。</p>
 <p>また <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> を取り除き <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a> を含める必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from '/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
--import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
-+import {GLTFLoader} from '/examples/jsm/loaders/GLTFLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from 'three/addons/loaders/LoaderSupport.js';
+-import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+-import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
++import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 </pre>
 <p>実行すると以下になりました。</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/ja/load-obj.html

@@ -52,7 +52,7 @@
 <p><a href="lights.html">ライティングの記事</a> にあるディレクショナルライティングの例から始めて、半球ライティングの例と組み合わせて <a href="/docs/#api/ja/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a> と <a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> を1つ作る事にしました。その結果として <a href="/docs/#api/ja/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a> は1つ、<a href="/docs/#api/ja/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> は1つになりました。
 また、ライトの調整に関連する全てのGUIを削除しました。シーンに追加していたキューブとスフィアも削除しました。</p>
 <p>まず最初に <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> のローダーをコードに含める必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 </pre>
 <p>次にOBJファイルをロードするために <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> のインスタンスを作成し、OBJファイルのURLを渡し、ロードされたモデルをシーンに追加するコールバックを渡します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
@@ -124,10 +124,10 @@ blenderで <strong>File-&gt;External Data-&gt;Unpack All Into Files</strong> を
 
 <p>テクスチャを利用できるようになったのでMTLファイルをロードします。
 <a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a> をimportする必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
-+import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
++import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 </pre>
 <p>まず、MTLファイルをロードします。
 読込後にロードしたマテリアルを <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>に設定して、<a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> でOBJファイルをロードします。</p>

manual/ja/multiple-scenes.html

@@ -416,7 +416,7 @@ function render(time) {
 <h2 id="-">各要素にコントロールを追加する</h2>
 <p><code class="notranslate" translate="no">TrackballControls</code> のようなインタラクティブな要素を追加するのは簡単です。
 最初にコントロール用のスクリプトを追加します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from '/examples/jsm/controls/TrackballControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
 </pre>
 <p>そして <code class="notranslate" translate="no">TrackballControls</code> を各シーンに追加し、シーンに関連付けられた要素を渡します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {

manual/ja/offscreencanvas.html

@@ -236,7 +236,7 @@ worker.postMessage({type: 'main', canvas: offscreen}, [offscreen]);
 <p><code class="notranslate" translate="no">shared-cubes.js</code> と <code class="notranslate" translate="no">offscreencanvas-worker-cubes.js</code> は前の <code class="notranslate" translate="no">offscreencanvas-cubes.js</code> ファイルを分割したものです。</p>
 <p>まず <code class="notranslate" translate="no">offscreencanvas-cubes.js</code> を全て <code class="notranslate" translate="no">shared-cube.js</code> にコピーします。
 次にHTMLファイルには既に <code class="notranslate" translate="no">main</code> があり、<code class="notranslate" translate="no">init</code> と <code class="notranslate" translate="no">state</code> をエクスポートする必要があるため <code class="notranslate" translate="no">main</code> の名前を <code class="notranslate" translate="no">init</code> に変更します。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
 
 -const state = {
 +export const state = {
@@ -570,7 +570,7 @@ OrbitControlsが必要とする機能をサポートする必要があります
 ある時はメインページで実行され、全てのイベント、関連するプロパティ値をWorkerに渡します。
 また、ある時はWorkerで実行され、全てのイベント、DOMイベントと同じ構造をもつイベントをメインページに渡すので、OrbitControlsは違いを見分けられません。</p>
 <p>ここにWorker部分のコードがあります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from 'three';
 
 class ElementProxyReceiver extends EventDispatcher {
   constructor() {
@@ -640,8 +640,8 @@ self.onmessage = function(e) {
 };
 </pre>
 <p>共有のthree.jsコードでは <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> をインポートして設定する必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 export function init(data) {
 -  const {canvas} = data;

manual/ja/optimize-lots-of-objects-animated.html

@@ -321,10 +321,10 @@ showFileInfo(fileInfos, fileInfos[0]);
 または簡単にカスタムアニメーションのコードを書く事ができますが、
 オリジナルのwebgl globeでは<a href="https://github.com/tweenjs/tween.js/">アニメーションライブラリ</a>を使っているので合わせましょう。</p>
 <p>アニメーションライブラリをimportする必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {TWEEN} from '/examples/jsm/libs/tween.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {TWEEN} from 'three/addons/libs/tween.min.js';
 </pre>
 <p>そして、影響を与えるアニメーションの <code class="notranslate" translate="no">Tween</code> を作成します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// show the selected data, hide the rest

manual/ja/optimize-lots-of-objects.html

@@ -366,7 +366,7 @@ renderが必要なのは連続的なレンダリングでなく、<a href="rende
 今回は1つ1つのジオメトリを新しく作成し、各ボックスジオメトリの頂点を移動するために <code class="notranslate" translate="no">applyMatrix</code> を使用するので、2回ではなく1回にした方が良いかもしれません。</p>
 <p>最後に全てのジオメトリの配列を <code class="notranslate" translate="no">BufferGeometryUtils.mergeBufferGeometries</code> に渡します。
 また <code class="notranslate" translate="no">BufferGeometryUtils</code> も含める必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 </pre>
 <p>少なくとも私のマシンでは毎秒60フレームになりました。</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/ja/post-processing.html

@@ -95,10 +95,10 @@ composer.addPass(filmPass);
 <p><code class="notranslate" translate="no">filmPass</code> は最後のPassなので、<code class="notranslate" translate="no">renderToScreen</code> プロパティをtrueに設定し、キャンバスにレンダリングするようにします。
 この設定がないと次のレンダーターゲットにレンダリングされます。</p>
 <p>これらのクラスを使用するには、以下をインポートする必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from '/examples/jsm/postprocessing/EffectComposer.js';
-import {RenderPass} from '/examples/jsm/postprocessing/RenderPass.js';
-import {BloomPass} from '/examples/jsm/postprocessing/BloomPass.js';
-import {FilmPass} from '/examples/jsm/postprocessing/FilmPass.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
+import {BloomPass} from 'three/addons/postprocessing/BloomPass.js';
+import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
 </pre>
 <p>ほとんどのポストプロセスには <code class="notranslate" translate="no">EffectComposer.js</code> と <code class="notranslate" translate="no">RenderPass.js</code> が必須です。</p>
 <p>最後に <a href="/docs/#api/ja/renderers/WebGLRenderer.render"><code class="notranslate" translate="no">WebGLRenderer.render</code></a> の代わりに <code class="notranslate" translate="no">EffectComposer.render</code> を使用し、<code class="notranslate" translate="no">EffectComposer</code> にキャンバスのサイズを合わせます。</p>
@@ -157,7 +157,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 </pre>
 <p>これでどのように設定するか、かなり明確になりました。</p>
 <p>これらの値を設定する簡単なGUIを作ってみましょう。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>そして</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();

manual/ja/prerequisites.html

@@ -43,7 +43,7 @@ ES5、ES6、およびES7を把握してる事を前提とします。
 <p>es6モジュールはスクリプトの中で <code class="notranslate" translate="no">import</code> キーワード、または <code class="notranslate" translate="no">&lt;script type="module"&gt;</code> タグを使用してインラインでロードできます。
 以下に両方の使用​​例があります。</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 

manual/ja/rendering-on-demand.html

@@ -44,8 +44,8 @@ requestAnimationFrame(render);
 変更にはテクスチャやモデルの読込完了、外部ソースからのデータ受取、ユーザーによる設定やカメラ調整などその他の関連する入力などが含まれます。</p>
 <p><a href="responsive.html">レスポンシブデザインの記事</a>を例に要求に応じてレンダリングするように修正してみましょう。</p>
 <p>最初に <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> を追加します。これで何かの変更を反映してレンダリングする事ができます。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>次に以下のように設定します。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
@@ -162,9 +162,9 @@ render();
 
 <p></p>
 <p>シンプルなlil-guiを追加し、GUIで値の変更時にレンダリングを要求してみましょう。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>各キューブの色と×スケールを設定できるようにしましょう。
 色を設定するには<a href="lights.html">照明の記事</a>で作成した <code class="notranslate" translate="no">ColorGUIHelper</code> を使います。</p>

manual/ja/textures.html

@@ -438,7 +438,7 @@ const material = new THREE.MeshBasicMaterial({
 });
 </pre>
 <p>ここでも、簡単なインターフェースを提供するために<a href="https://github.com/georgealways/lil-gui">lil-gui</a>を使います。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>以前のlil-guiの例でしたように、lil-guiに度数で操作できるオブジェクトを与え、
 ラジアン単位でプロパティを設定する簡単なクラスを使います。</p>

manual/ja/transparency.html

@@ -342,9 +342,9 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
     .onChange(requestRenderIfNotRequested);
 </pre>
 <p>もちろん、lil-guiを含める必要があります。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from './resources/three/r119/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r119/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>その結果がこちらです。</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">
@@ -378,4 +378,4 @@ import {OrbitControls} from './resources/threejs/r119/examples/jsm/controls/Orbi
 
 
 
-</body></html>
+</body></html>

manual/ko/align-html-elements-to-3d.html

@@ -47,8 +47,8 @@
 <p>이 글에서는 맨 마지막 방법에 대해 다룰 겁니다.</p>
 <p>간단한 것부터 시작해보죠. 원시 모델 위에 이름표를 붙인 3D 장면을 구현할 겁니다. 예제는 <a href="responsive.html">반응형 디자인에 관한 글</a>의 예제를 수정해 쓰도록 하죠.</p>
 <p>여기에 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 넣습니다. <a href="lights.html">조명에 관한 글</a>에서 다뤘었죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 0, 0);
@@ -590,9 +590,9 @@ for (const countryInfo of countryInfos) {
   ...
 </pre>
 <p>마지막으로 어떤 값이 적당한지 알기 어려우니 이 값을 조정할 수 있도록 GUI를 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-+import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
++import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const settings = {
 +  minArea: 20,

manual/ko/backgrounds.html

@@ -183,7 +183,7 @@ scene.background = bgTexture;
 }
 </pre>
 <p>카메라도 조작이 가능하도록 만듭니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // canvas 기본값

manual/ko/canvas-textures.html

@@ -237,8 +237,8 @@ cubes.push(cube);  // 정육면체 배열에 추가해 애니메이션이 적용
 +makePerson(+3, 32, 'Red Menace', 'red');
 </pre>
 <p>마지막으로 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 넣어 카메라를 움직일 수 있도록 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // 캔버스 기본값

manual/ko/fundamentals.html

@@ -106,7 +106,7 @@ Three.js는 3차원 세계를 다루므로, 우리는 정육면체(cube)를 3차
 
 <p>먼저, Three.js를 로드합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 &lt;/script&gt;
 </pre>
 <p><code class="notranslate" translate="no">type="module"</code> 속성을 지정하는 것을 잊지 마세요. 이러면 <code class="notranslate" translate="no">import</code> 키워드를
@@ -121,7 +121,7 @@ import * as THREE from '../../build/three.module.js';
 </pre>
 <p>이제 Three.js에게 렌더링을 맡겨보죠.</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
@@ -345,7 +345,7 @@ es6 모듈은 js 파일이나 인라인 <code class="notranslate" translate="no"
 <code class="notranslate" translate="no">import</code> 키워드를 사용해 로드할 수 있습니다.
 </p>
 <pre class="prettyprint">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 
@@ -393,12 +393,12 @@ import * as THREE from '../../build/three.module.js';
 참조하도록 할 수 있죠.
 </p>
 <pre class="prettyprint">import * as THREE from './someFolder/build/three.module.js';
-import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from './someFolder/addons/controls/OrbitControls.js';
 </pre>
 <p>아래는 CDN을 사용하는 예시입니다. <code class="notranslate" translate="no">three.modules.js</code>의 경로가 <code class="notranslate" translate="no">/build/three.modules.js</code>
 로 끝나야 한다는 것을 명심하세요.</p>
 <pre class="prettyprint">import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
-import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from 'https://unpkg.com/[email protected]/addons/controls/OrbitControls.js';
 </pre>
 </div>
         </div>

manual/ko/game.html

@@ -173,10 +173,10 @@ function init() {
 </pre>
 <p>이제 애니메이션이 들어간 모델을 화면에 띄워봅시다.</p>
 <p><a href="load-gltf.html">이전 glTF 파일 예제</a>와 달리 이번에는 각 모델을 하나 이상 배치할 계획입니다. 그러니 파일을 불러온 뒤 바로 장면에 넣는 대신 각 glTF의 씬 그래프(scene), 이 경우에는 움직이는 캐릭터를 복사해야 합니다. 다행히 Three.js에는 <code class="notranslate" translate="no">SkeletonUtil.clone</code>이라는 함수가 있어 이를 쉽게 구현할 수 있죠. 먼저 해당 모듈을 불러오겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-import { GLTFLoader } from '/examples/jsm/loaders/GLTFLoader.js';
-+import { SkeletonUtils } from '/examples/jsm/utils/SkeletonUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
++import { SkeletonUtils } from 'three/addons/utils/SkeletonUtils.js';
 </pre>
 <p>그리고 아까 불러왔던 모델을 복사합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
@@ -1316,11 +1316,11 @@ class StateDisplayHelper extends Component {
 }
 </pre>
 <p>추가로 lil-gui를 이용해 위 디버깅 요소들를 켜고 끌 수 있도록 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-import { GLTFLoader } from '/examples/jsm/loaders/GLTFLoader.js';
-import { SkeletonUtils } from '/examples/jsm/utils/SkeletonUtils.js';
-+import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { SkeletonUtils } from 'three/addons/utils/SkeletonUtils.js';
++import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const gui = new GUI();
 +gui.add(globals, 'debug').onChange(showHideDebugInfo);

manual/ko/lights.html

@@ -48,8 +48,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 <p>다음으로 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 추가합니다. <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>는 특정 좌표를
 중심으로 카메라를 자전 또는 <em>공전(orbit)</em>하도록 해줍니다. <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>는
 별도 모듈이므로, 먼저 페이지에 로드해야 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>이제 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>에 카메라와, DOM 이벤트를 감지할 수 있도록
 canvas 요소를 넘겨줍니다.</p>
@@ -396,9 +396,9 @@ scene.add(helper);
 </pre>
 <p><a href="/docs/#api/ko/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a>를 사용하려면 별도의 데이터를 불러와야 합니다. 또한
 <a href="/docs/#api/ko/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a>도 같이 불러와 조명을 시각화하겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { RectAreaLightUniformsLib } from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import { RectAreaLightHelper } from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <p>모듈을 불러온 후 <code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code> 메서드를 호출합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {

manual/ko/load-gltf.html

@@ -113,10 +113,10 @@ mtlLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', (mtl) => {
 <p>자동으로 카메라의 시야를 조정하는 코드는 그대로 두었습니다.</p>
 <p>모듈이 바뀌었으니 import 문도 변경해야 합니다. <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>를 제거하고 <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a>를
 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import { LoaderSupport } from '/examples/jsm/loaders/LoaderSupport.js';
--import { OBJLoader } from '/examples/jsm/loaders/OBJLoader.js';
--import { MTLLoader } from '/examples/jsm/loaders/MTLLoader.js';
-+import { GLTFLoader } from '/examples/jsm/loaders/GLTFLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import { LoaderSupport } from 'three/addons/loaders/LoaderSupport.js';
+-import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+-import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
++import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 </pre>
 <p>이제 실행해보죠.</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/ko/load-obj.html

@@ -62,7 +62,7 @@
 하나, <a href="/docs/#api/ko/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a> 하나가 있는 셈입니다. 또 GUI 관련 코드와 정육면체,
 구체 관련 코드도 지웁니다.</p>
 <p>다음으로 먼저 <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a> 모듈을 스크립트에 로드합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { OBJLoader } from '/examples/jsm/loaders/OBJLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 </pre>
 <p><a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>의 인스턴스를 생성한 뒤 .OBJ 파일의 경로와 콜백 함수를 넘겨
 <code class="notranslate" translate="no">load</code> 메서드를 실행합니다. 그리고 콜백 함수에서 불러온 모델을 장면에
@@ -139,10 +139,10 @@ map_Ns windmill_001_base_SPEC.jpg
 
 <p>이제 .MTL 파일에서 사용할 텍스처를 생성했으니 .MTL 파일을 불러오도록 합시다.</p>
 <p><a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a> 모듈을 불러옵니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-import { OBJLoader } from '/examples/jsm/loaders/OBJLoader.js';
-+import { MTLLoader } from '/examples/jsm/loaders/MTLLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
++import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
 </pre>
 <p></p>
 <p>우선 .MTL 파일을 불러와 <code class="notranslate" translate="no">MtlObjBridge</code>로 재질을 만듭니다. 그리고 <a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>

manual/ko/multiple-scenes.html

@@ -422,7 +422,7 @@ function render(time) {
 <h2 id="-">각 요소에 액션 추가하기</h2>
 <p>사용자 액션, 예를 들어 <code class="notranslate" translate="no">TrackballControls</code>를 추가하는 건 아주 간단합니다. 먼저 스크립트를
 불러옵니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { TrackballControls } from '/examples/jsm/controls/TrackballControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
 </pre>
 <p>그리고 각 장면에 대응하는 요소에 <code class="notranslate" translate="no">TrackballControls</code>를 추가합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {

manual/ko/offscreencanvas.html

@@ -205,7 +205,7 @@ worker.postMessage({ type: 'main', canvas: offscreen }, [ offscreen ]);
 </li>
 </ol>
 <p><code class="notranslate" translate="no">shared-cubes.js</code>와 <code class="notranslate" translate="no">offscreencanvas-worker-cubes.js</code>는 단순히 이전 <code class="notranslate" translate="no">offscreencanvas-cubes.js</code> 파일을 쪼갠 것입니다. 먼저 <code class="notranslate" translate="no">offscreencanvas-cube.js</code>를 <code class="notranslate" translate="no">shared-cube.js</code>로 옮긴 뒤, 메인 HTML 파일에 이미 <code class="notranslate" translate="no">main</code> 함수가 있어 <code class="notranslate" translate="no">main</code> 함수의 이름만 <code class="notranslate" translate="no">init</code>으로 바꿔야 하죠. 여기에 추가로 <code class="notranslate" translate="no">init</code>과 <code class="notranslate" translate="no">state</code> 함수를 export 시켜줘야 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
 
 -const state = {
 +export const state = {
@@ -529,7 +529,7 @@ window.addEventListener('touchend', clearPickPosition);
 <p>터치 이벤트의 경우는 <code class="notranslate" translate="no">touches</code> 속성의 <code class="notranslate" translate="no">pageX</code>, <code class="notranslate" translate="no">pageY</code> 속성이 필요하네요.</p>
 <p>이를 처리할 경유(proxy) 객체를 한 쌍 만들어봅시다. 한쪽은 메인 페이지에서 위 이벤트를 받아 필요한 속성을 워커에 넘겨주는 역할을 할 겁니다. 그리고 다른 한쪽은 워커 안에서 이 이벤트를 받아 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>에 넘겨줄 겁니다. 이벤트 객체가 DOM 이벤트와 같은 구조이기에 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>는 이 이벤트가 DOM 이벤트가 아니란 걸 눈치채지 못하겠죠.</p>
 <p>아래는 워커 안의 코드입니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { EventDispatcher } from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { EventDispatcher } from 'three';
 
 class ElementProxyReceiver extends EventDispatcher {
   constructor() {
@@ -596,8 +596,8 @@ self.onmessage = function(e) {
 };
 </pre>
 <p>Three.js의 공통 코드에 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 모듈도 불러와 설정해야 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 export function init(data) {
 -  const { canvas } = data;

manual/ko/optimize-lots-of-objects-animated.html

@@ -294,10 +294,10 @@ showFileInfo(fileInfos, fileInfos[0]);
 <p>이제 각 데이터 그룹에 전환 효과를 줘야 합니다. mesh를 사라지고 나타나게 하는 대신 mesh의 <code class="notranslate" translate="no">morphTargetInfluences</code> 속성을 바꿔 애니메이션을 구현할 겁니다. 화면에 렌더링할 데이터 그룹의 influence(영향)은 1, 렌더링하지 않을 그룹의 influence는 0으로 설정하는 것이죠.</p>
 <p>단순히 숫자 0, 1을 바로 지정할 수도 있지만 그러면 애니메이션이 하나도 보이지 않을 겁니다. 아까 썼던 방법과 전혀 차이가 없는 결과가 나오겠죠. 물론 직접 애니메이션 코드를 작성할 수도 있지만 원본 WebGL 지구본이 <a href="https://github.com/tweenjs/tween.js/">애니메이션 라이브러리</a>를 썼으므로 같은 라이브러리를 사용해보겠습니다.</p>
 <p>먼저 라이브러리를 불러옵니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { BufferGeometryUtils } from '/examples/jsm/utils/BufferGeometryUtils.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-+import { TWEEN } from '/examples/jsm/libs/tween.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
++import { TWEEN } from 'three/addons/libs/tween.min.js';
 </pre>
 <p>그리고 <code class="notranslate" translate="no">Tween</code>으로 influence 속성에 애니메이션을 줍니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// 선택한 데이터를 보여주고 나머지는 숨깁니다.

manual/ko/optimize-lots-of-objects.html

@@ -350,7 +350,7 @@ function hsl(h, s, l) {
 <p>위 코드에서는 육면체의 중심을 옮기는 대신 <code class="notranslate" translate="no">originHelper</code>를 새로 만들어 중심축을 옮겼습니다. 이전에는 같은 geometry를 19000번 재활용했지만, 이번에는 데이터마다 geometry를 새로 생성했죠. 또한 <code class="notranslate" translate="no">applyMatrix</code>를 이용해 육면체 자체의 정점을 이동시키므로 메서드를 두 번 쓰는 대신 한 번만 썼습니다.</p>
 <p>그리고 생성한 육면체를 전부 배열에 저장한 뒤 이 배열을 <code class="notranslate" translate="no">BufferGeometryUtils.mergeBufferGeometries</code>에 넘겨 하나의 geometry로 합쳤습니다.</p>
 <p>물론 <code class="notranslate" translate="no">BufferGeometryUtils</code>을 불러와야죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { BufferGeometryUtils } from '/examples/jsm/utils/BufferGeometryUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
 </pre>
 <p>이제 제 컴퓨터에서는 적어도 60 프레임 이상이 나오네요.</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/ko/post-processing.html

@@ -78,10 +78,10 @@ composer.addPass(filmPass);
 </pre>
 <p><code class="notranslate" translate="no">filmPass</code>가 마지막 pass이기에 캔버스에 결과를 바로 렌더링하도록 <code class="notranslate" translate="no">renderToScreen</code> 옵션을 true로 설정했습니다. 이 옵션을 설정하지 않으면 캔버스가 아닌 다음 렌더 타겟에 장면을 렌더링할 거예요.</p>
 <p>또 이 클래스들을 사용하기 위해 여러 스크립트를 불러와야 합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { EffectComposer } from '/examples/jsm/postprocessing/EffectComposer.js';
-import { RenderPass } from '/examples/jsm/postprocessing/RenderPass.js';
-import { BloomPass } from '/examples/jsm/postprocessing/BloomPass.js';
-import { FilmPass } from '/examples/jsm/postprocessing/FilmPass.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
+import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
 </pre>
 <p>대부분의 후처리에는 <code class="notranslate" translate="no">EffectComposer.js</code>와 <code class="notranslate" translate="no">RenderPass.js</code>가 필수입니다.</p>
 <p>이제 <a href="/docs/#api/ko/renderers/WebGLRenderer.render"><code class="notranslate" translate="no">WebGLRenderer.render</code></a> 대신 <code class="notranslate" translate="no">EffectComposer.render</code>를 사용<em>하고</em> <code class="notranslate" translate="no">EffectComposer</code>가 결과물을 캔버스의 크기에 맞추도록 해야 합니다.</p>
@@ -137,7 +137,7 @@ if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlin
 if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 </pre>
 <p>이제 어떻게 값을 지정해야 하는지 알았으니 이 값을 조작하는 GUI를 만들어봅시다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>일단 모듈을 로드합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();

manual/ko/prerequisites.html

@@ -44,7 +44,7 @@
 <p>ES2015 모듈은 스크립트 안에서 <code class="notranslate" translate="no">import</code> 키워드나, 인라인 <code class="notranslate" translate="no">&lt;script type="module"&gt;</code>
 태그로 불러올 수 있습니다. 두 가지 예시를 동시에 써보죠.</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 

manual/ko/rendering-on-demand.html

@@ -51,8 +51,8 @@ requestAnimationFrame(render);
 <p><a href="responsive.html">반응형 디자인에 관한 글</a>에서 썼던 예제를 수정해
 필요에 따른 렌더링을 구현해봅시다.</p>
 <p>먼저 뭔가 변화를 일으킬 수 있는 요소가 필요하니 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 추가합니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 ...
 
@@ -174,9 +174,9 @@ render();
 
 <p></p>
 <p>간단한 lil-gui를 추가해 반복 렌더링 여부를 제어할 수 있도록 하겠습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-+import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
++import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>먼저 각 정육면체의 색과 x축 스케일을 조정하는 GUI를 추가합니다. <a href="lights.html">조명에 관한 글</a>에서
 썼던 <code class="notranslate" translate="no">ColorGUIHelper</code>를 가져와 쓰도록 하죠.</p>

manual/ko/textures.html

@@ -457,7 +457,7 @@ const material = new THREE.MeshBasicMaterial({
 </pre>
 <p>간단한 인터페이스를 만들어보죠.
 다시 한 번 <a href="https://github.com/georgealways/lil-gui">lil-gui</a>가 등장할 때입니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>이전 예제처럼 간단한 헬퍼 클래스를 만들어 각도(degrees)로 값을 조절하면
 알아서 호도(radians)로 변환해 지정하게끔 해줍니다.</p>

manual/ko/transparency.html

@@ -355,9 +355,9 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
     .onChange(requestRenderIfNotRequested);
 </pre>
 <p>물론 lil-gui 모듈도 불러와야죠.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import { OrbitControls } from '/examples/jsm/controls/OrbitControls.js';
-+import { GUI } from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
++import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p></p><div translate="no" class="threejs_example_container notranslate">
   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/transparency-intersecting-planes-alphatest.html"></iframe></div>

manual/ko/webxr-basics.html

@@ -56,8 +56,8 @@ WebXR API. <a href="setup.html">the article on setting up</a>에 언급된 서
 이를 통해 콘솔 경보, 오류, 실제로 <a href="debugging-javascript.html">코드 디버그(debug your code)</a>가  가능합니다.</p>
 <p>아래 코드가 작동하는 것을 보고 싶다면 이 사이트에서 코드를 실행할 수 있습니다.</p>
 <p>가장 먼저 해야 할 일은 three.js를 포함시킨 후 VR 지원을 포함하는 것입니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from './resources/three/r132/build/three.module.js';
-+import {VRButton} from './resources/threejs/r132/examples/jsm/webxr/VRButton.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {VRButton} from 'three/addons/webxr/VRButton.js';
 </pre>
 <p>이후 three.js's WebXR 지원을 활성화하며, 이를 위한 VR button을 페이지에 추가하여 주어야합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
@@ -347,4 +347,4 @@ VR에서 손으로 물건을 가상으로 조작하여 지원 여부를 결정
 
 
 
-</body></html>
+</body></html>

manual/ru/fundamentals.html

@@ -61,7 +61,7 @@
 </pre><p>Three.js будет рисовать на этом холсте, так что нам нужно найти 
 его и передать three.js.</p>
 <pre class="prettyprint showlinemods notranslate notranslate" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 function main() {
   const canvas = document.querySelector('#c');

manual/ru/lights.html

@@ -50,8 +50,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 или <em>поворачивать</em> камеру вокруг некоторой точки. <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> - это 
 дополнительные функции three.js, поэтому сначала нам нужно 
 включить их в нашу страницу.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>Теперь мы можем использовать их. Мы передаем в <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> камеру для 
 управления и элемент DOM для получения входных событий</p>
@@ -414,9 +414,9 @@ scene.add(helper);
 }
 </pre>
 <p>Для использования <a href="/docs/#api/en/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a> нам нужно включить некоторые дополнительные возможности three.js</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {RectAreaLightUniformsLib} from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {RectAreaLightUniformsLib} from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
   const canvas = document.querySelector('#c');

manual/ru/multiple-scenes.html

@@ -440,7 +440,7 @@ function render(time) {
 <h2 id="-">Добавление элементов управления к каждому элементу</h2>
 <p>Например, добавление <code class="notranslate" translate="no">TrackballControls</code> в интерактивном режиме так же просто. 
 Сначала мы добавляем скрипт для контролов.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from '/examples/jsm/controls/TrackballControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
 </pre>
 <p>И затем мы можем добавить <code class="notranslate" translate="no">TrackballControls</code> к каждой сцене, передавая элемент, связанный с этой сценой.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {

manual/ru/offscreencanvas.html

@@ -229,7 +229,7 @@ worker.postMessage({type: 'main', canvas: offscreen}, [offscreen]);
 </ol>
 <p><code class="notranslate" translate="no">shared-cubes.js</code> и <code class="notranslate" translate="no">offscreencanvas-worker-cubes.js</code> по сути являются разделением нашего 
 предыдущего файла <code class="notranslate" translate="no">offscreencanvas-cubes.js</code>. Сначала мы копируем весь файл <code class="notranslate" translate="no">offscreencanvas-cubes.js</code> в <code class="notranslate" translate="no">shared-cube.js</code>. Затем мы переименовываем <code class="notranslate" translate="no">main</code> в <code class="notranslate" translate="no">init</code>, так как у нас уже есть <code class="notranslate" translate="no">main</code> в нашем HTML-файле, и нам нужно экспортировать <code class="notranslate" translate="no">init</code> и состояние</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
 
 -const state = {
 +export const state = {
@@ -561,7 +561,7 @@ window.addEventListener('touchend', clearPickPosition);
 <p>А для событий касания нам понадобятся только <code class="notranslate" translate="no">pageX</code> и <code class="notranslate" translate="no">pageY</code> из свойства <code class="notranslate" translate="no">touches</code>.</p>
 <p>Итак, создадим пару прокси-объектов. Одна часть будет работать на главной странице, получать все эти события и передавать соответствующие значения свойств воркеру. Другая часть будет запускаться в воркере, получать эти события и передавать их, используя события, которые имеют ту же структуру, что и исходные события DOM, поэтому <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> не сможет определить разницу.</p>
 <p>Вот код рабочей части.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from '../../build/three.module.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EventDispatcher} from 'three';
 
 class ElementProxyReceiver extends EventDispatcher {
   constructor() {
@@ -628,8 +628,8 @@ self.onmessage = function(e) {
 };
 </pre>
 <p>Нам также нужно добавить <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> в начало скрипта.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '../../build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 
 export function init(data) {
 -  const {canvas} = data;

manual/ru/optimize-lots-of-objects-animated.html

@@ -332,10 +332,10 @@ showFileInfo(fileInfos, fileInfos[0]);
 но поскольку оригинальный глобус webgl использует
 <a href="https://github.com/tweenjs/tween.js/">библиотеку анимации</a> давайте используем тот же самый здесь.</p>
 <p>Нам нужно включить библиотеку </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {TWEEN} from '/examples/jsm/libs/tween.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {TWEEN} from 'three/addons/libs/tween.min.js';
 </pre>
 <p>А затем создайте <code class="notranslate" translate="no">Tween</code> чтобы оживить влияние.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// show the selected data, hide the rest

manual/ru/optimize-lots-of-objects.html

@@ -380,7 +380,7 @@ THREE.Object3D, как мы покрывали в <a href="scenegraph.html">гр
 для перемещения вершин каждой геометрии блока, мы могли бы сделать это один раз, а не два. </p>
 <p>В конце мы передаем массив всех геометрий в <code class="notranslate" translate="no">BufferGeometryUtils.mergeBufferGeometries</code>, который объединит их все в одну сетку. </p>
 <p>Нам также нужно включить <code class="notranslate" translate="no">BufferGeometryUtils</code> </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 </pre>
 <p>И теперь, по крайней мере на моей машине, я получаю 60 кадров в секунду </p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/ru/prerequisites.html

@@ -44,7 +44,7 @@
 <h2 id="es6-modules">es6 modules</h2>
 <p>Модули es6 можно загружать с помощью ключевого слова <code class="notranslate" translate="no">import</code> в сценарии или встроенного тега <code class="notranslate" translate="no">&lt;script type="module"&gt;</code>. Вот пример обоих </p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 

manual/ru/rendering-on-demand.html

@@ -46,8 +46,8 @@ requestAnimationFrame(render);
 <p>Давайте возьмем пример из <a href="responsive.html">статьи об отзывчивости</a>
 и изменим его для отображения по требованию. </p>
 <p>Сначала мы добавим в OrbitControls, чтобы можно было что-то изменить, что мы можем сделать в ответ. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>и настроить их</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
@@ -165,9 +165,9 @@ render();
 
 <p></p>
 <p>Давайте также добавим простой графический интерфейс lil-gui и внесем его изменения по запросу. </p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>Давайте позволим установить цвет и шкалу х каждого куба. Чтобы установить цвет, мы будем использовать <code class="notranslate" translate="no">ColorGUIHelper</code>, который мы создали в <a href="lights.html">статье о светах</a>.</p>
 <p>Сначала нам нужно создать графический интерфейс</p>

manual/ru/textures.html

@@ -461,7 +461,7 @@ const material = new THREE.MeshBasicMaterial({
 </pre>
 <p>Затем мы снова будем использовать <a href="https://github.com/georgealways/lil-gui">lil-gui</a> 
 для обеспечения простого интерфейса.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>Как мы делали в предыдущих примерах lil-gui, мы будем использовать простой класс, 
 чтобы дать lil-gui объект, которым он может манипулировать в градусах, 

manual/zh/align-html-elements-to-3d.html

@@ -60,8 +60,8 @@
         <p>我们会添加一个 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate"
               translate="no">OrbitControls</code></a> 就像我们在 <a href="lights.html">这篇光照的文章</a>里做的一样。</p>
         <pre class="prettyprint showlinemods notranslate lang-js" translate="no">
-import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';</pre>
+import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';</pre>
         <pre class="prettyprint showlinemods notranslate lang-js" translate="no">
 const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 0, 0);
@@ -613,9 +613,9 @@ for (const countryInfo of countryInfos) {
 
   ...</pre>
           <p>最后，由于我不确定这些值设多少好，于是添加一个GUI，就可以调试了</p>
-          <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';</pre>
+          <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';</pre>
           <pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const settings = {
 +  minArea: 20,
 +  maxVisibleDot: -0.2,

manual/zh/backgrounds.html

@@ -188,7 +188,7 @@ scene.background = bgTexture;</pre>
 }</pre>
           <p>让我们添加一些控件，以便我们可以旋转相机。</p>
           <pre class="prettyprint showlinemods notranslate lang-js"
-            translate="no">import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';</pre>
+            translate="no">import {OrbitControls} from 'three/addons/controls/OrbitControls.js';</pre>
           <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // Canvas默认值
 const near = 0.1;

manual/zh/canvas-textures.html

@@ -230,8 +230,8 @@ cubes.push(cube);  // 添加到cube list中方便旋转</pre>
 +makePerson(-0, 32, 'Green Machine', 'green');
 +makePerson(+3, 32, 'Red Menace', 'red');</pre>
           <p>剩下的就是添加 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 这样我们就可以移动相机了。</p>
-          <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';</pre>
+          <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';</pre>
           <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
 const aspect = 2;  // Canvas默认值
 const near = 0.1;

manual/zh/fundamentals.html

@@ -74,7 +74,7 @@ ES6的语法。<a href="prerequisites.html">点击这里查看你需要提前掌
 
 <p>首先是加载three.js</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 &lt;/script&gt;
 </pre>
 <p>把<code class="notranslate" translate="no">type="module"</code>放到script标签中很重要。这可以让我们使用<code class="notranslate" translate="no">import</code>关键字加载three.js。还有其他的方法可以加载three.js，但是自r106开始，使用模块是最推荐的方式。模块的优点是可以很方便地导入需要的其他模块。这样我们就不用再手动引入它们所依赖的其他文件了。</p>
@@ -85,7 +85,7 @@ import * as THREE from '../../build/three.module.js';
 </pre>
 <p>Three.js需要使用这个canvas标签来绘制，所以我们要先获取它然后传给three.js。</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
@@ -258,7 +258,7 @@ requestAnimationFrame(render);
 在一个脚本中，es6模块可以通过<code class="notranslate" translate="no">import</code>关键字加载或者通过<code class="notranslate" translate="no">&lt;script type="module"&gt;</code>行内标签。这有一个两种方法都用的例子。
 </p>
 <pre class="prettyprint">&lt;script type="module"&gt;
-import * as THREE from '../../build/three.module.js';
+import * as THREE from 'three';
 
 ...
 
@@ -302,12 +302,12 @@ import * as THREE from '../../build/three.module.js';
 使用相同的结构保证了当你导入three和任一示例库时，它们都会引用同一个three.module.js文件。
 </p>
 <pre class="prettyprint">import * as THREE from './someFolder/build/three.module.js';
-import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from './someFolder/addons/controls/OrbitControls.js';
 </pre>
 <p>在使用CDN时，是同样的道理。确保<code class="notranslate" translate="no">three.modules.js</code>的路径以
 <code class="notranslate" translate="no">/build/three.modules.js</code>结尾，比如</p>
 <pre class="prettyprint">import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
-import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from 'https://unpkg.com/[email protected]/addons/controls/OrbitControls.js';
 </pre>
 </div>
         </div>

manual/zh/lights.html

@@ -42,8 +42,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 +camera.position.set(0, 10, 20);
 </pre>
 <p>然后我们添加一个 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>。<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 让我们可以围绕某一个点旋转控制相机。<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 是 three.js 的可选模块，所以我们首先需要引入这个模块。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>然后我们就可以使用了。创建 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 时传入两个参数，一个是要控制的相机对象，第二个是检测事件的 DOM 元素。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const controls = new OrbitControls(camera, canvas);
@@ -338,9 +338,9 @@ scene.add(helper);
 }
 </pre>
 <p>为了使用 <a href="/docs/#api/zh/lights/RectAreaLight"><code class="notranslate" translate="no">RectAreaLight</code></a>，我们需要引入 three.js 的<code class="notranslate" translate="no">RectAreaLightUniformsLib</code> 模块，同时使用 <a href="/docs/#api/zh/helpers/RectAreaLightHelper"><code class="notranslate" translate="no">RectAreaLightHelper</code></a> 来辅助查看灯光对象。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {RectAreaLightUniformsLib} from '/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from '/examples/jsm/helpers/RectAreaLightHelper.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {RectAreaLightUniformsLib} from 'three/addons/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from 'three/addons/helpers/RectAreaLightHelper.js';
 </pre>
 <p>我们需要先调用 <code class="notranslate" translate="no">RectAreaLightUniformsLib.init</code></p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {

manual/zh/load-gltf.html

@@ -104,10 +104,10 @@ gltfLoader.load(url, (gltf) => {
 				<p>我们需要包含 <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate"
 							translate="no">GLTFLoader</code></a> 并删除 <a href="/docs/#examples/loaders/OBJLoader"><code
 							class="notranslate" translate="no">OBJLoader</code></a>.</p>
-				<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from '/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
--import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
-+import {GLTFLoader} from '/examples/jsm/loaders/GLTFLoader.js';
+				<pre class="prettyprint showlinemods notranslate lang-html" translate="no">-import {LoaderSupport} from 'three/addons/loaders/LoaderSupport.js';
+-import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+-import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
++import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
 </pre>
 				<p>像这样运行</p>
 				<p></p>

manual/zh/load-obj.html

@@ -49,7 +49,7 @@
 <p>让我们一起来尝试将它展示出来。</p>
 <p>基于<a href="lights.html">光线文章</a>中的定向光线（<a href="/docs/#api/zh/lights/DirectionalLight"><code class="notranslate" translate="no">DirectionalLight</code></a>）示例，结合半球光线（<a href="/docs/#api/zh/lights/HemisphereLight"><code class="notranslate" translate="no">HemisphereLight</code></a>）示例。相对于示例，我删除了所有与调整灯光相关的GUI内容，还删除了添加到场景中的立方体和球体。</p>
 <p>第一件要做的事就是将<a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>添加到代码中。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
 </pre>
 <p>然后创建<a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>的实例并通过URL加载我们的.OBJ文件，并在回调函数中将已加载完的模型添加到场景（scene）里。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
@@ -115,10 +115,10 @@ map_Ns windmill_001_base_SPEC.jpg
 
 <p>现在.MTL文件就能加载到这些纹理。</p>
 <p>首先要引用 <a href="/docs/#examples/loaders/MTLLoader"><code class="notranslate" translate="no">MTLLoader</code></a>;</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader} from '/examples/jsm/loaders/OBJLoader.js';
-+import {MTLLoader} from '/examples/jsm/loaders/MTLLoader.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
++import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 </pre>
 <p></p>
 <p>然后我们先加载.MTL文件，在它加载完材质后利用<code class="notranslate" translate="no">MtlObjBridge</code>将材质传给<a href="/docs/#examples/loaders/OBJLoader"><code class="notranslate" translate="no">OBJLoader</code></a>，再加载.OBJ文件。</p>

manual/zh/multiple-scenes.html

@@ -397,7 +397,7 @@ function render(time) {
 <p></p>
 <h2 id="-">给每个元素增加控制器</h2>
 <p>当需要交互时，我们需要为每个场景分别添加交互控件，如<code class="notranslate" translate="no">TrackballControls</code>。首先，需要引入该控件。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from './resources/threejs/r132/examples/jsm/controls/TrackballControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
 </pre>
 <p>接着给每个元素增加控制器：</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {
@@ -614,4 +614,4 @@ function addScene(elem, fn) {
 
 
 
-</body></html>
+</body></html>

manual/zh/optimize-lots-of-objects-animated.html

@@ -294,10 +294,10 @@ showFileInfo(fileInfos, fileInfos[0]);
 <p>以上我们为每一组数据集创建了几何体, 以第一个作为基准, 获取了<code class="notranslate" translate="no">position</code>属性, 将其他的几何体作为其变形目标</p>
 <p>现在我们需要改变显示和隐藏各种数据集的方式. 我们需要改动变形目标的influence, 而不是简单地显示和隐藏mesh. 对于我们我们想看到的数据集, influence应该是1, 不想看到的是0. 但是我们又不能直接将他们设置成1和0, 这将会显示开与闭的两种情况, 和现在这种没有区别. 我们也可以写一段自定义的动画效果, 听起来不难. 但是我们模仿的WebGL globe用了一个<a href="https://github.com/tweenjs/tween.js/">动画库</a>, 我们也用这一个. </p>
 <p>我们这里首先引入它</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {BufferGeometryUtils} from '/examples/jsm/utils/BufferGeometryUtils.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {TWEEN} from '/examples/jsm/libs/tween.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {BufferGeometryUtils} from 'three/addons/utils/BufferGeometryUtils.js';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {TWEEN} from 'three/addons/libs/tween.min.js';
 </pre>
 <p>然后创建一个<code class="notranslate" translate="no">Tween</code>来使influence变化</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">// show the selected data, hide the rest

manual/zh/optimize-lots-of-objects.html

@@ -346,7 +346,7 @@ function hsl(h, s, l) {
 <p>我们移除了之前用来改变盒子几何中心的代码, 取而代之的是<code class="notranslate" translate="no">originHelper</code>. 这次我们要为每个长方体创建新的几何体, 因为我们要使用“applyMatrix”来移动每个长方体几何体的顶点, 所以我们最好只移动一次, 而不是两次.</p>
 <p>最后, 我们将所有几何体的数组传入<code class="notranslate" translate="no">BufferGeometryUtils.mergeBufferGeometries</code>, 这个方法将会将其合并到一个mesh中</p>
 <p>别忘了引入<code class="notranslate" translate="no">BufferGeometryUtils</code></p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from '/examples/jsm/utils/BufferGeometryUtils.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
 </pre>
 <p>现在, 至少在我的机器上, 可以跑到60帧每秒了</p>
 <p></p><div translate="no" class="threejs_example_container notranslate">

manual/zh/post-processing.html

@@ -77,10 +77,10 @@ composer.addPass(filmPass);
 </pre>
 <p>由于filmPass是最后一次传递，我们将其renderToScreen属性设置为true来告诉它渲染到画布。如果不设置它，它将渲染到下一个渲染目标。</p>
 <p>为了使用这些类,我们需要导入一些js模块</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from '/examples/jsm/postprocessing/EffectComposer.js';
-import {RenderPass} from '/examples/jsm/postprocessing/RenderPass.js';
-import {BloomPass} from '/examples/jsm/postprocessing/BloomPass.js';
-import {FilmPass} from '/examples/jsm/postprocessing/FilmPass.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {EffectComposer} from 'three/addons/postprocessing/EffectComposer.js';
+import {RenderPass} from 'three/addons/postprocessing/RenderPass.js';
+import {BloomPass} from 'three/addons/postprocessing/BloomPass.js';
+import {FilmPass} from 'three/addons/postprocessing/FilmPass.js';
 </pre>
 <p>对于几乎所有的后期处理EffectComposer.js，RenderPass.js 都是必需的。</p>
 <p>们需要做的最后一件事是使用EffectComposer.render 替代 WebGLRenderer.render 并告诉EffectComposer来匹配画布的大小</p>
@@ -135,7 +135,7 @@ if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 </pre>
 <p>这样就很清楚如何设置它们。</p>
 <p>让我们快速创建一个GUI来设置这些值</p>
-<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>和</p>
 <pre class="prettyprint showlinemods notranslate lang-glsl" translate="no">const gui = new GUI();

manual/zh/rendering-on-demand.html

@@ -44,8 +44,8 @@ requestAnimationFrame(render);
 <p>首先我们添加<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>, 这样当摄像机改变之后场景就可以随之渲染</p>
 <p>First we'll add in the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> so there is something that could change
 that we can render in response to.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-+import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
++import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 </pre>
 <p>然后</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
@@ -154,9 +154,9 @@ render();
 
 <p></p>
 <p>让我们加一个简单的GUI</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>这个控制器可以改变每个立方体的颜色和在x方向缩放. 为了设置颜色我们用了<code class="notranslate" translate="no">ColorGUIHelper</code>, 这个在<a href="lights.html">光线</a>一章提到过</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();

manual/zh/textures.html

@@ -368,7 +368,7 @@ const material = new THREE.MeshBasicMaterial({
 });
 </pre>
 <p>然后，我们会再次使用 <a href="https://github.com/georgealways/lil-gui">lil-gui</a> 来提供一个简单的界面。</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 <p>正如我们在之前的lil-gui例子中所做的那样，我们将使用一个简单的类来给lil-gui提供一个可以以度数为单位进行操作的对象，但它将以弧度为单位设置该属性。</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class DegRadHelper {

manual/zh/transparency.html

@@ -329,9 +329,9 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
     .onChange(requestRenderIfNotRequested);
 </pre>
 			<p>当然我们需要引用lil-gui。</p>
-			<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from '/build/three.module.js';
-import {OrbitControls} from '/examples/jsm/controls/OrbitControls.js';
-+import {GUI} from '/examples/jsm/libs/lil-gui.module.min.js';
+			<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
++import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
 </pre>
 			<p>下面是结果。</p>
 			<p></p><div translate="no" class="threejs_example_container notranslate">