fixes for r108 and modules

threejs/lessons/ru/threejs-cameras.md

@@ -76,7 +76,7 @@ function updateCamera() {
   camera.updateProjectionMatrix();
 }
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
@@ -152,8 +152,8 @@ const view2Elem = document.querySelector('#view2');
 только за первый элемент представления.
 
 ```js
--const controls = new THREE.OrbitControls(camera, canvas);
-+const controls = new THREE.OrbitControls(camera, view1Elem);
+-const controls = new OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, view1Elem);
 ```
 
 Создадим вторую `PerspectiveCamera` и вторую `OrbitControls`.
@@ -170,7 +170,7 @@ const camera2 = new THREE.PerspectiveCamera(
 camera2.position.set(40, 10, 30);
 camera2.lookAt(0, 5, 0);
 
-const controls2 = new THREE.OrbitControls(camera2, view2Elem);
+const controls2 = new OrbitControls(camera2, view2Elem);
 controls2.target.set(0, 5, 0);
 controls2.update();
 ```
@@ -274,7 +274,7 @@ function setScissorForElement(elem) {
 -  camera.updateProjectionMatrix();
 -}
 
-const gui = new dat.GUI();
+const gui = new GUI();
 -gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 +gui.add(camera, 'fov', 1, 180);
 const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
@@ -423,7 +423,7 @@ camera.zoom = 0.2;
 Давайте добавим настройки GUI для `zoom`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 +gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
 ```
 

threejs/lessons/ru/threejs-lights.md

@@ -28,16 +28,16 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 дополнительные функции three.js, поэтому сначала нам нужно 
 включить их в нашу страницу.
 
-```html
-<script src="../resources/threejs/r108/three.min.js"></script>
-+<script src="../resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 Теперь мы можем использовать их. Мы передаем в `OrbitControls` камеру для 
 управления и элемент DOM для получения входных событий
 
 ```js
-const controls = new THREE.OrbitControls(camera, canvas);
+const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 5, 0);
 controls.update();
 ```
@@ -157,7 +157,7 @@ class ColorGUIHelper {
 И вот наш код настройки dat.GUI
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 ```
@@ -201,7 +201,7 @@ scene.add(light);
 Давайте также обновим код dat.GUI для редактирования обоих цветов.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 -gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 +gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
 +gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
@@ -240,7 +240,7 @@ scene.add(light.target);
 добавляя ее в наш графический интерфейс.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 gui.add(light.target.position, 'x', -10, 10);
@@ -292,7 +292,7 @@ function makeXYZGUI(gui, vector3, name, onChangeFn) {
 +}
 +updateLight();
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -355,7 +355,7 @@ function updateLight{
 Давайте настроим графический интерфейс, чтобы мы могли регулировать расстояние.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 +gui.add(light, 'distance', 0, 40).onChange(updateLight);
@@ -468,9 +468,16 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 
 Для использования `RectAreaLight` нам нужно включить некоторые дополнительные возможности three.js
 
-```html
-<script src="../resources/threejs/r108/three.min.js"></script>
-+<script src="../resources/threejs/r108/js/lights/RectAreaLightUniformsLib.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {RectAreaLightUniformsLib} from './resources/threejs/r108/examples/jsm/lights/RectAreaLightUniformsLib.js';
+```
+
+```js
+function main() {
+  const canvas = document.querySelector('#c');
+  const renderer = new THREE.WebGLRenderer({canvas});
++  RectAreaLightUniformsLib.init();
 ```
 
 Если вы забудете RectAreaLightUniformsLib, индикатор все равно будет работать, 
@@ -499,7 +506,7 @@ scene.add(helper);
 свет и регулировать его `width` и `height`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 10, 0.01);
 gui.add(light, 'width', 0, 20).onChange(updateLight);
@@ -550,7 +557,7 @@ light.distance = Infinity;
 и мы добавим графический интерфейс, чтобы мы могли изменить `power` и `decay`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'decay', 0, 4, 0.01);
 gui.add(light, 'power', 0, 2000);

threejs/lessons/ru/threejs-multiple-scenes.md

@@ -471,8 +471,8 @@ document.querySelectorAll('[data-diagram]').forEach((elem) => {
 Например, добавление `TrackballControls` в интерактивном режиме так же просто. 
 Сначала мы добавляем скрипт для контролов.
 
-```html
-<script src="../resources/threejs/r108/js/controls/TrackballControls.js"></script>
+```js
+import {TrackballControls} from './resources/threejs/r108/examples/jsm/controls/TrackballControls.js';
 ```
 
 И затем мы можем добавить `TrackballControls` к каждой сцене, передавая элемент, связанный с этой сценой.
@@ -491,7 +491,7 @@ document.querySelectorAll('[data-diagram]').forEach((elem) => {
   camera.lookAt(0, 0, 0);
 +  scene.add(camera);
 
-+  const controls = new THREE.TrackballControls(camera, elem);
++  const controls = new TrackballControls(camera, elem);
 +  controls.noZoom = true;
 +  controls.noPan = true;
 

threejs/lessons/ru/threejs-textures.md

@@ -520,8 +520,8 @@ const material = new THREE.MeshBasicMaterial({
 Затем мы снова будем использовать [dat.GUI](https://github.com/dataarts/dat.gui) 
 для обеспечения простого интерфейса.
 
-```html
-<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 Как мы делали в предыдущих примерах dat.GUI, мы будем использовать простой класс, 
@@ -575,7 +575,7 @@ function updateTexture() {
   texture.needsUpdate = true;
 }
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(new StringToNumberHelper(texture, 'wrapS'), 'value', wrapModes)
   .name('texture.wrapS')
   .onChange(updateTexture);

threejs/lessons/threejs-align-html-elements-to-3d.md

@@ -34,13 +34,13 @@ with an example from [the article on responsive pages](threejs-responsive.html)
 
 We'll add some `OrbitControls` like we did in [the article on lighting](threejs-lights.html).
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js
-const controls = new THREE.OrbitControls(camera, canvas);
+const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 0, 0);
 controls.update();
 ```
@@ -723,11 +723,10 @@ for (const countryInfo of countryInfos) {
 Finally, since I'm not sure what good values are for these settings lets
 add a GUI so we can play with them
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-+<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
++import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 ```js
@@ -735,7 +734,7 @@ add a GUI so we can play with them
 +  minArea: 20,
 +  maxVisibleDot: -0.2,
 +};
-+const gui = new dat.GUI({width: 300});
++const gui = new GUI({width: 300});
 +gui.add(settings, 'minArea', 0, 50).onChange(requestRenderIfNotRequested);
 +gui.add(settings, 'maxVisibleDot', -1, 1, 0.01).onChange(requestRenderIfNotRequested);
 

threejs/lessons/threejs-backgrounds.md

@@ -179,8 +179,8 @@ function render(time) {
 
 Let's add some controls in so we can rotate the camera.
 
-```html
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js
@@ -193,7 +193,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 -camera.position.z = 2;
 +camera.position.z = 3;
 
-+const controls = new THREE.OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, canvas);
 +controls.target.set(0, 0, 0);
 +controls.update();
 ```

threejs/lessons/threejs-cameras.md

@@ -77,7 +77,7 @@ function updateCamera() {
   camera.updateProjectionMatrix();
 }
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
 gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
@@ -153,8 +153,8 @@ And we'll set our existing `OrbitControls` to respond to the first
 view element only.
 
 ```js
--const controls = new THREE.OrbitControls(camera, canvas);
-+const controls = new THREE.OrbitControls(camera, view1Elem);
+-const controls = new OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, view1Elem);
 ```
 
 Let's make a second `PerspectiveCamera` and a second `OrbitControls`.
@@ -171,7 +171,7 @@ const camera2 = new THREE.PerspectiveCamera(
 camera2.position.set(40, 10, 30);
 camera2.lookAt(0, 5, 0);
 
-const controls2 = new THREE.OrbitControls(camera2, view2Elem);
+const controls2 = new OrbitControls(camera2, view2Elem);
 controls2.target.set(0, 5, 0);
 controls2.update();
 ```
@@ -277,7 +277,7 @@ in the `render` function.
 -  camera.updateProjectionMatrix();
 -}
 
-const gui = new dat.GUI();
+const gui = new GUI();
 -gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
 +gui.add(camera, 'fov', 1, 180);
 const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
@@ -425,7 +425,7 @@ to make it easy to adjust how many units are actually shown by the camera.
 Let's add a GUI setting for `zoom`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 +gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
 ```
 

threejs/lessons/threejs-canvas-textures.md

@@ -260,9 +260,9 @@ We can then make people with labels
 What's left is to add some `OrbitControls` so we can move
 the camera.
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js
@@ -275,7 +275,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 -camera.position.z = 2;
 +camera.position.set(0, 2, 5);
 
-+const controls = new THREE.OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, canvas);
 +controls.target.set(0, 2, 0);
 +controls.update();
 ```

threejs/lessons/threejs-cleanup.md

@@ -380,7 +380,7 @@ And with that let's take an example from [the article on loading gltf files](thr
 and make it load and free files.
 
 ```js
-const gltfLoader = new THREE.GLTFLoader();
+const gltfLoader = new GLTFLoader();
 function loadGLTF(url) {
   return new Promise((resolve, reject) => {
     gltfLoader.load(url, resolve, undefined, reject);

threejs/lessons/threejs-custom-geometry.md

@@ -447,9 +447,9 @@ A few minor changes to make it easier to view.
 
 * include the `OrbitControls`
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js
@@ -462,7 +462,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 -camera.position.z = 5;
 +camera.position.set(20, 20, 20);
 
-+const controls = new THREE.OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, canvas);
 +controls.target.set(0, 0, 0);
 +controls.update();
 ```

threejs/lessons/threejs-debugging-javascript.md

@@ -97,7 +97,7 @@ the root scene object from [the gLTF article](threejs-load-gltf.html)
 
 ```js
   {
-    const gltfLoader = new THREE.GLTFLoader();
+    const gltfLoader = new GLTFLoader();
     gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
       const root = gltf.scene;
       scene.add(root);

threejs/lessons/threejs-game.md

@@ -77,7 +77,7 @@ const models = {
   knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
 };
 {
-  const gltfLoader = new THREE.GLTFLoader(manager);
+  const gltfLoader = new GLTFLoader(manager);
   for (const model of Object.values(models)) {
     gltfLoader.load(model.url, (gltf) => {
       model.gltf = gltf;
@@ -236,11 +236,11 @@ it for skinned animated characters. Fortunately there's a utility function,
 `SkeletonUtils.clone` we can use to do this. So, first we need to include
 the utils.
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
-+<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
++import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
 ```
 
 Then we can clone the models we just loaded
@@ -254,7 +254,7 @@ function init() {
   prepModelsAndAnimations();
 
 +  Object.values(models).forEach((model, ndx) => {
-+    const clonedScene = THREE.SkeletonUtils.clone(model.gltf.scene);
++    const clonedScene = SkeletonUtils.clone(model.gltf.scene);
 +    const root = new THREE.Object3D();
 +    root.add(clonedScene);
 +    scene.add(root);
@@ -287,7 +287,7 @@ function init() {
   prepModelsAndAnimations();
 
   Object.values(models).forEach((model, ndx) => {
-    const clonedScene = THREE.SkeletonUtils.clone(model.gltf.scene);
+    const clonedScene = SkeletonUtils.clone(model.gltf.scene);
     const root = new THREE.Object3D();
     root.add(clonedScene);
     scene.add(root);
@@ -350,7 +350,7 @@ function init() {
   prepModelsAndAnimations();
 
   Object.values(models).forEach((model, ndx) => {
-    const clonedScene = THREE.SkeletonUtils.clone(model.gltf.scene);
+    const clonedScene = SkeletonUtils.clone(model.gltf.scene);
     const root = new THREE.Object3D();
     root.add(clonedScene);
     scene.add(root);
@@ -633,7 +633,7 @@ class SkinInstance extends Component {
   constructor(gameObject, model) {
     super(gameObject);
     this.model = model;
-    this.animRoot = THREE.SkeletonUtils.clone(this.model.gltf.scene);
+    this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
     this.mixer = new THREE.AnimationMixer(this.animRoot);
     gameObject.transform.add(this.animRoot);
     this.actions = {};
@@ -1682,16 +1682,16 @@ class Animal extends Component {
 While we're at it lets make it so we can turn them on/off using dat.GUI like
 we've used else where
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
-<script src="resources/threejs/r108/js/utils/SkeletonUtils.js"></script>
-+<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
+import {SkeletonUtils} from './resources/threejs/r108/examples/jsm/utils/SkeletonUtils.js';
++import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 ```js
-+const gui = new dat.GUI();
++const gui = new GUI();
 +gui.add(globals, 'debug').onChange(showHideDebugInfo);
 +showHideDebugInfo();
 

threejs/lessons/threejs-lights.md

@@ -28,16 +28,16 @@ or *orbit* the camera around some point. The `OrbitControls` are
 an optional feature of three.js so first we need to include them
 in our page
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 Then we can use them. We pass the `OrbitControls` a camera to
 control and the DOM element to use to get input events
 
 ```js
-const controls = new THREE.OrbitControls(camera, canvas);
+const controls = new OrbitControls(camera, canvas);
 controls.target.set(0, 5, 0);
 controls.update();
 ```
@@ -155,7 +155,7 @@ class ColorGUIHelper {
 And here's our code setting up dat.GUI
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 ```
@@ -201,7 +201,7 @@ scene.add(light);
 Let's also update the dat.GUI code to edit both colors
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 -gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 +gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
 +gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
@@ -241,7 +241,7 @@ Let's make it so we can move the target by adding it to
 our GUI.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 gui.add(light.target.position, 'x', -10, 10);
@@ -293,7 +293,7 @@ and the target's position like this
 +}
 +updateLight();
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 
@@ -358,7 +358,7 @@ units away from the light.
 Let's setup the GUI so we can adjust the distance.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 +gui.add(light, 'distance', 0, 40).onChange(updateLight);
@@ -475,9 +475,18 @@ The `RectAreaLight` only works with the `MeshStandardMaterial` and the
 
 To use the `RectAreaLight` we need to include some extra three.js optional data
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/lights/RectAreaLightUniformsLib.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {RectAreaLightUniformsLib} from './resources/threejs/r108/examples/jsm/lights/RectAreaLightUniformsLib.js';
+```
+
+and we need to call `RectAreaLightUniformsLib.init`
+
+```js
+function main() {
+  const canvas = document.querySelector('#c');
+  const renderer = new THREE.WebGLRenderer({canvas});
++  RectAreaLightUniformsLib.init();
 ```
 
 If you forget the data the light will still work but it will look funny so
@@ -508,7 +517,7 @@ Let's also adjust the GUI. We'll make it so we can rotate the light and adjust
 its `width` and `height`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 10, 0.01);
 gui.add(light, 'width', 0, 20).onChange(updateLight);
@@ -559,7 +568,7 @@ light.distance = Infinity;
 and we'll add gui so we can change the `power` and `decay`
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'decay', 0, 4, 0.01);
 gui.add(light, 'power', 0, 2000);

threejs/lessons/threejs-load-gltf.md

@@ -72,7 +72,7 @@ for loading .OBJ and replaced it with code for loading .GLTF
 The old .OBJ code was
 
 ```js
-const objLoader = new THREE.OBJLoader2();
+const objLoader = new OBJLoader2();
 objLoader.loadMtl('resources/models/windmill/windmill-fixed.mtl', null, (materials) => {
   materials.Material.side = THREE.DoubleSide;
   objLoader.setMaterials(materials);
@@ -88,7 +88,7 @@ The new .GLTF code is
 
 ```js
 {
-  const gltfLoader = new THREE.GLTFLoader();
+  const gltfLoader = new GLTFLoader();
   const url = 'resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf';
   gltfLoader.load(url, (gltf) => {
     const root = gltf.scene;
@@ -102,10 +102,10 @@ I kept the auto framing code as before
 We also need to include the `GLTFLoader` and we can get rid of the `OBJLoader2`.
 
 ```html
--<script src="resources/threejs/r108/js/loaders/LoaderSupport.js"></script>
--<script src="resources/threejs/r108/js/loaders/OBJLoader2.js"></script>
--<script src="resources/threejs/r108/js/loaders/MTLLoader.js"></script>
-+<script src="resources/threejs/r108/js/loaders/GLTFLoader.js"></script>
+-import {LoaderSupport} from './resources/threejs/r108/examples/jsm/loaders/LoaderSupport.js';
+-import {OBJLoader2} from './resources/threejs/r108/examples/jsm/loaders/OBJLoader2.js';
+-import {MTLLoader} from './resources/threejs/r108/examples/jsm/loaders/MTLLoader.js';
++import {GLTFLoader} from './resources/threejs/r108/examples/jsm/loaders/GLTFLoader.js';
 ```
 
 And running that we get
@@ -140,7 +140,7 @@ function dumpObject(obj, lines = [], isLast = true, prefix = '') {
 And I just called it right after loading the scene.
 
 ```js
-const gltfLoader = new THREE.GLTFLoader();
+const gltfLoader = new GLTFLoader();
 gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
   const root = gltf.scene;
   scene.add(root);
@@ -212,7 +212,7 @@ and saved the result.
 ```js
 +let cars;
 {
-  const gltfLoader = new THREE.GLTFLoader();
+  const gltfLoader = new GLTFLoader();
   gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
     const root = gltf.scene;
     scene.add(root);
@@ -276,7 +276,7 @@ the new `Object3D` a `cars` array.
 -let cars;
 +const cars = [];
 {
-  const gltfLoader = new THREE.GLTFLoader();
+  const gltfLoader = new GLTFLoader();
   gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
     const root = gltf.scene;
     scene.add(root);
@@ -681,7 +681,7 @@ Then, after loading, we need to turn on shadows on all the objects.
 
 ```js
 {
-  const gltfLoader = new THREE.GLTFLoader();
+  const gltfLoader = new GLTFLoader();
   gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf', (gltf) => {
     const root = gltf.scene;
     scene.add(root);

threejs/lessons/threejs-load-obj.md

@@ -45,9 +45,9 @@ that were being added to the scene.
 
 From that the first thing we need to do is include the `OBJLoader2` loader in our scene. The `OBJLoader2` also needs the `LoaderSupport.js` file so let's add both.
 
-```html
-<script src="resources/threejs/r108/js/loaders/LoaderSupport.js"></script>
-<script src="resources/threejs/r108/js/loaders/OBJLoader2.js"></script>
+```js
+import {LoaderSupport} from './resources/threejs/r108/examples/jsm/loaders/LoaderSupport.js';
+import {OBJLoader2} from './resources/threejs/r108/examples/jsm/loaders/OBJLoader2.js';
 ```
 
 Then to load the .OBJ file we create an instance of `OBJLoader2`,
@@ -56,7 +56,7 @@ the loaded model to our scene.
 
 ```js
 {
-  const objLoader = new THREE.OBJLoader2();
+  const objLoader = new OBJLoader2();
   objLoader.load('resources/models/windmill/windmill.obj', (event) => {
     const root = event.detail.loaderRootNode;
     scene.add(root);
@@ -144,19 +144,19 @@ Now that we have the textures available we can load the .MTL file.
 
 First we need to include the `MTLLoader`
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-<script src="resources/threejs/r108/js/loaders/LoaderSupport.js"></script>
-<script src="resources/threejs/r108/js/loaders/OBJLoader2.js"></script>
-+<script src="resources/threejs/r108/js/loaders/MTLLoader.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
+import {LoaderSupport} from './resources/threejs/r108/examples/jsm/loaders/LoaderSupport.js';
+import {OBJLoader2} from './resources/threejs/r108/examples/jsm/loaders/OBJLoader2.js';
++import {MTLLoader} from './resources/threejs/r108/examples/jsm/loaders/MTLLoader.js';
 ```
 
 Then we first load the .MTL file. When it's finished loading we set the just loaded materials on to the `OBJLoader2` itself and then load the .OBJ file.
 
 ```js
 {
-+  const objLoader = new THREE.OBJLoader2();
++  const objLoader = new OBJLoader2();
 +  objLoader.loadMtl('resources/models/windmill/windmill.mtl', null, (materials) => {
 +    objLoader.setMaterials(materials);
     objLoader.load('resources/models/windmill/windmill.obj', (event) => {
@@ -200,7 +200,7 @@ head I can think of 3 ways to fix this.
    out the blades use the material called `"Material"`so we could set
    that one specifically 
 
-        const objLoader = new THREE.OBJLoader2();
+        const objLoader = new OBJLoader2();
         objLoader.loadMtl('resources/models/windmill/windmill.mtl', null, (materials) => {
           materials.Material.side = THREE.DoubleSide;
           ...
@@ -389,7 +389,7 @@ larger size.
 
 ```js
 {
-  const objLoader = new THREE.OBJLoader2();
+  const objLoader = new OBJLoader2();
   objLoader.load('resources/models/windmill_2/windmill.obj', (event) => {
     const root = event.detail.loaderRootNode;
     scene.add(root);
@@ -553,7 +553,7 @@ and then set them on the `OBJLoader2`
 
 ```js
 {
-+  const objLoader = new THREE.OBJLoader2();
++  const objLoader = new OBJLoader2();
 +  objLoader.loadMtl('resources/models/windmill_2/windmill-fixed.mtl', null, (materials) => {
 +    objLoader.setMaterials(materials);
     objLoader.load('resources/models/windmill/windmill.obj', (event) => {

threejs/lessons/threejs-multiple-scenes.md

@@ -444,8 +444,8 @@ No change to the visuals but the code is even more generic.
 
 Adding interactively, for example a `TrackballControls` is just as easy. First we add the script for the control.
 
-```html
-<script src="resources/threejs/r108/js/controls/TrackballControls.js"></script>
+```js
+import {TrackballControls} from './resources/threejs/r108/examples/jsm/controls/TrackballControls.js';
 ```
 
 And then we can add a `TrackballControls` to each scene passing in the element associated with that scene.
@@ -464,7 +464,7 @@ And then we can add a `TrackballControls` to each scene passing in the element a
   camera.lookAt(0, 0, 0);
 +  scene.add(camera);
 
-+  const controls = new THREE.TrackballControls(camera, elem);
++  const controls = new TrackballControls(camera, elem);
 +  controls.noZoom = true;
 +  controls.noPan = true;
 

threejs/lessons/threejs-offscreencanvas.md

@@ -317,9 +317,9 @@ note we include `shared-cubes.js` which is all our three.js code
 
 Similarly we need to include `shared-cubes.js` in the main page
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="shared-cubes.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {init, state} from './shared-cubes.js';
 ```
 We can remove the HTML and CSS we added previously
 
@@ -741,7 +741,7 @@ function init(data) {
 +  const {canvas, inputElement} = data;
   const renderer = new THREE.WebGLRenderer({canvas});
 
-+  const controls = new THREE.OrbitControls(camera, inputElement);
++  const controls = new OrbitControls(camera, inputElement);
 +  controls.target.set(0, 0, 0);
 +  controls.update();
 ```

threejs/lessons/threejs-optimize-lots-of-objects-animated.md

@@ -267,7 +267,7 @@ First let's change `addBoxes` to just make and return the merged geometry.
   ...
 
 
--  const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
+-  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 -      geometries, false);
 -  const material = new THREE.MeshBasicMaterial({
 -    vertexColors: THREE.VertexColors,
@@ -275,7 +275,7 @@ First let's change `addBoxes` to just make and return the merged geometry.
 -  const mesh = new THREE.Mesh(mergedGeometry, material);
 -  scene.add(mesh);
 -  return mesh;
-+  return THREE.BufferGeometryUtils.mergeBufferGeometries(
++  return BufferGeometryUtils.mergeBufferGeometries(
 +     geometries, false);
 }
 ```
@@ -377,11 +377,11 @@ because the original webgl globe uses
 
 We need to include the library
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-+<script src="resources/threejs/r108/js/libs/tween.min.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
++import {TWEEN} from './resources/threejs/r108/examples/jsm/libs/tween.min.js';
 ```
 
 And then create a `Tween` to animate the influences.

threejs/lessons/threejs-optimize-lots-of-objects.md

@@ -407,7 +407,7 @@ function addBoxes(file) {
     });
   });
 
-+  const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
++  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
 +      geometries, false);
 +  const material = new THREE.MeshBasicMaterial({color:'red'});
 +  const mesh = new THREE.Mesh(mergedGeometry, material);
@@ -423,13 +423,13 @@ box and since we are going to use `applyMatrix` to move the vertices of each box
 geometry we might as well do it once instead of twice.
 
 At the end we pass an array of all the geometries to
-`THREE.BufferGeometryUtils.mergeBufferGeometries` which will combined all of
+`BufferGeometryUtils.mergeBufferGeometries` which will combined all of
 them into a single mesh.
 
 We also need to include the `BufferGeometryUtils`
 
-```html
-<script src="resources/threejs/r108/js/utils/BufferGeometryUtils.js"></script>
+```js
+import {BufferGeometryUtils} from './resources/threejs/r108/examples/jsm/utils/BufferGeometryUtils.js';
 ```
 
 And now, at least on my machine, I get 60 frames per second
@@ -504,8 +504,8 @@ It then adds that as an attribute by calling `geometry.addAttribute`.
 
 Lastly we need to tell three.js to use the vertex colors. 
 
-```
-const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
+```js
+const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
     geometries, false);
 -const material = new THREE.MeshBasicMaterial({color:'red'});
 +const material = new THREE.MeshBasicMaterial({

threejs/lessons/threejs-post-processing-3dlut.md

@@ -205,7 +205,7 @@ lutTextures.forEach((info, ndx) => {
 const lutSettings = {
   lut: lutNameIndexMap.identity,
 };
-const gui = new dat.GUI({ width: 300 });
+const gui = new GUI({ width: 300 });
 gui.add(lutSettings, 'lut', lutNameIndexMap);
 ```
 
@@ -422,9 +422,9 @@ I also write a quick drag and drop library. Let's use both to make it so you can
 
 First we need the 2 libraries
 
-```html
-<script src="resources/lut-reader.js"></script>
-<script src="resources/drag-and-drop.js"></script>
+```js
+import * as lutParser from './resources/lut-reader.js';
+import * as dragAndDrop from './resources/drag-and-drop.js';
 ```
 
 Then we can use them like this
@@ -465,7 +465,7 @@ and we need to make the GUI update to include the new file(s)
 const lutSettings = {
   lut: lutNameIndexMap.thermal,
 };
-const gui = new dat.GUI({ width: 300 });
+const gui = new GUI({ width: 300 });
 gui.addFolder('Choose LUT or Drag&Drop LUT File(s)');
 
 let lutGUI;

threejs/lessons/threejs-post-processing.md

@@ -63,14 +63,14 @@ article on responsivness](threejs-responsive.html).
 To that first we create an `EffectComposer`.
 
 ```js
-const composer = new THREE.EffectComposer(renderer);
+const composer = new EffectComposer(renderer);
 ```
 
 Then as the first pass we add a `RenderPass` that will render our scene with our
 camera into the first render target.
 
 ```js
-composer.addPass(new THREE.RenderPass(scene, camera));
+composer.addPass(new RenderPass(scene, camera));
 ```
 
 Next we add a `BloomPass`. A `BloomPass` renders its input to a generally
@@ -78,7 +78,7 @@ smaller render target and blurs the result. It then adds that blurred result on
 top of the original input. This makes the scene *bloom*
 
 ```js
-const bloomPass = new THREE.BloomPass(
+const bloomPass = new BloomPass(
     1,    // strength
     25,   // kernel size
     4,    // sigma ?
@@ -90,7 +90,7 @@ composer.addPass(bloomPass);
 Finally we had a `FilmPass` that draws noise and scanlines on top of its input.
 
 ```js
-const filmPass = new THREE.FilmPass(
+const filmPass = new FilmPass(
     0.35,   // noise intensity
     0.025,  // scanline intensity
     648,    // scanline count
@@ -104,24 +104,17 @@ Since the `filmPass` is the last pass we set its `renderToScreen` property to
 true to tell it to render to the canvas. Without setting this it would instead
 render to the next render target.
 
-To use these classes we need to include a bunch of scripts.
-
-```html
-<script src="resources/threejs/r108/js/shaders/CopyShader.js"></script>
-<script src="resources/threejs/r108/js/shaders/ConvolutionShader.js"></script>
-<script src="resources/threejs/r108/js/shaders/FilmShader.js"></script>
-<script src="resources/threejs/r108/js/postprocessing/EffectComposer.js"></script>
-<script src="resources/threejs/r108/js/postprocessing/RenderPass.js"></script>
-<script src="resources/threejs/r108/js/postprocessing/ShaderPass.js"></script>
-<script src="resources/threejs/r108/js/postprocessing/BloomPass.js"></script>
-<script src="resources/threejs/r108/js/postprocessing/FilmPass.js"></script>
+To use these classes we need to import a bunch of scripts.
+
+```js
+import {EffectComposer} from './resources/threejs/r108/examples/jsm/postprocessing/EffectComposer.js';
+import {RenderPass} from './resources/threejs/r108/examples/jsm/postprocessing/RenderPass.js';
+import {BloomPass} from './resources/threejs/r108/examples/jsm/postprocessing/BloomPass.js';
+import {FilmPass} from './resources/threejs/r108/examples/jsm/postprocessing/FilmPass.js';
 ```
 
-For pretty much any post processing `EffectComposer.js`, `RenderPass.js`,
-`ShaderPass.js`, and `CopyShader.js` are required. The rest depend on which
-effects you plan to use. Usually if you miss one you'll get an error in [the
-JavaScript console](threejs-debugging-javascript.html) telling you which one
-you're missing.
+For pretty much any post processing `EffectComposer.js`, and `RenderPass.js`
+are required.
 
 The last things we need to do are to use `EffectComposer.render` instead of
 `WebGLRenderer.render` *and* to tell the `EffectComposer` to match the size of
@@ -198,14 +191,14 @@ So which makes it pretty clear how to set them.
 
 Let's make a quick GUI to set those values
 
-```html
-<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 and
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 {
   const folder = gui.addFolder('BloomPass');
   folder.add(bloomPass.copyUniforms.opacity, 'value', 0, 2).name('stength');
@@ -300,7 +293,7 @@ gl_FragColor = vec4(
 Adding some simple GUI to set the 3 values of the color
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(colorPass.uniforms.color.value, 'r', 0, 4).name('red');
 gui.add(colorPass.uniforms.color.value, 'g', 0, 4).name('green');
 gui.add(colorPass.uniforms.color.value, 'b', 0, 4).name('blue');

threejs/lessons/threejs-prerequisites.md

@@ -38,7 +38,6 @@ at the bottom of the page.
   <body>
      ...
   </body>
-  <script src="script1.js"></script>
   <script>
     // inline javascript
   </script>

threejs/lessons/threejs-rendering-on-demand.md

@@ -29,9 +29,9 @@ and modify it to render on demand.
 First we'll add in the `OrbitControls` so there is something that could change
 that we can render in response to.
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
 ```
 
 and set them up
@@ -44,7 +44,7 @@ const far = 5;
 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 camera.position.z = 2;
 
-+const controls = new THREE.OrbitControls(camera, canvas);
++const controls = new OrbitControls(camera, canvas);
 +controls.target.set(0, 0, 0);
 +controls.update();
 ```
@@ -178,10 +178,10 @@ below slides.
 
 Let's also add a simple dat.GUI GUI and make its changes render on demand.
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-+<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
++import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 Let's allow setting the color and x scale of each cube. To be able to set the
@@ -191,7 +191,7 @@ lights](threejs-lights.html).
 First we need to create a GUI
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 ```
 
 and then for each cube we'll create a folder and add 2 controls, one for

threejs/lessons/threejs-shadows.md

@@ -350,7 +350,7 @@ We'll also use the `MinMaxGUIHelper` we created in the [camera article](threejs-
 to adjust `near` and `far`.
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.add(light, 'intensity', 0, 2, 0.01);
 +{

threejs/lessons/threejs-textures.md

@@ -528,8 +528,8 @@ const material = new THREE.MeshBasicMaterial({
 
 Then we'll use [dat.GUI](https://github.com/dataarts/dat.gui) again to provide a simple interface.
 
-```html
-<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 As we did in previous dat.GUI examples we'll use a simple class to
@@ -583,7 +583,7 @@ function updateTexture() {
   texture.needsUpdate = true;
 }
 
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(new StringToNumberHelper(texture, 'wrapS'), 'value', wrapModes)
   .name('texture.wrapS')
   .onChange(updateTexture);

threejs/lessons/threejs-transparency.md

@@ -369,7 +369,7 @@ class AllMaterialPropertyGUIHelper {
 Then we'll add the gui
 
 ```js
-const gui = new dat.GUI();
+const gui = new GUI();
 gui.add(new AllMaterialPropertyGUIHelper('alphaTest', scene), 'value', 0, 1)
     .name('alphaTest')
     .onChange(requestRenderIfNotRequested);
@@ -380,10 +380,10 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
 
 and of course we need to include dat.gui
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/controls/OrbitControls.js"></script>
-+<script src="../3rdparty/dat.gui.min.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
++import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 
 and here's the results

threejs/lessons/threejs-webvr-point-to-select.md

@@ -340,8 +340,8 @@ const pickHelper = new ControllerPickHelper(scene);
 +      object: selectedObject,
 +      parent: selectedObject.parent,
 +    });
-+    THREE.SceneUtils.detach(selectedObject, selectedObject.parent, scene);
-+    THREE.SceneUtils.attach(selectedObject, scene, controller);
++    SceneUtils.detach(selectedObject, selectedObject.parent, scene);
++    SceneUtils.attach(selectedObject, scene, controller);
 +  }
 +});
 +
@@ -350,8 +350,8 @@ const pickHelper = new ControllerPickHelper(scene);
 +  const selection = controllerToSelection.get(controller);
 +  if (selection) {
 +    controllerToSelection.delete(controller);
-+    THREE.SceneUtils.detach(selection.object, controller, scene);
-+    THREE.SceneUtils.attach(selection.object, scene, selection.parent);
++    SceneUtils.detach(selection.object, controller, scene);
++    SceneUtils.attach(selection.object, scene, selection.parent);
 +  }
 +});
 ```
@@ -366,10 +366,10 @@ scene.
 
 We need to include them.
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-<script src="resources/threejs/r108/js/vr/WebVR.js"></script>
-+<script src="resources/threejs/r108/js/utils/SceneUtils.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
+import {WEBVR} from './resources/threejs/r108/examples/jsm/vr/WebVR.js';
++import {SceneUtils} from './resources/threejs/r108/examples/jsm/utils/SceneUtils.js';
 ```
 
 And with that we should be able to move the objects around with a 6DOF

threejs/lessons/threejs-webvr.md

@@ -68,9 +68,9 @@ this site.
 The first thing we need to do is include the VR support after
 including three.js
 
-```html
-<script src="resources/threejs/r108/three.min.js"></script>
-+<script src="resources/threejs/r108/js/vr/WebVR.js"></script>
+```js
+import * as THREE from './resources/three/r108/build/three.module.js';
++import {WEBVR} from './resources/threejs/r108/examples/jsm/vr/WebVR.js';
 ```
 
 Then we need to enable three.js's WebVR support and add its
@@ -81,7 +81,7 @@ function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
 +  renderer.vr.enabled = true;
-+  document.body.appendChild(THREE.WEBVR.createButton(renderer));
++  document.body.appendChild(WEBVR.createButton(renderer));
 ```
 
 We need to not try to resize when in VR mode as the VR device
@@ -357,7 +357,7 @@ function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
 -  renderer.vr.enabled = true;
--  document.body.appendChild(THREE.WEBVR.createButton(renderer));
+-  document.body.appendChild(WEBVR.createButton(renderer));
 
   const fov = 75;
   const aspect = 2;  // the canvas default
@@ -369,12 +369,12 @@ function main() {
 +  const allowvr = params.get('allowvr') === 'true';
 +  if (allowvr) {
 +    renderer.vr.enabled = true;
-+    document.body.appendChild(THREE.WEBVR.createButton(renderer));
++    document.body.appendChild(WEBVR.createButton(renderer));
 +    document.querySelector('#vr').style.display = 'none';
 +  } else {
 +    // no VR, add some controls
 +    camera.position.y = 1.6;
-+    const controls = new THREE.OrbitControls(camera, canvas);
++    const controls = new OrbitControls(camera, canvas);
 +    controls.target.set(0, 1.6, -2);
 +    controls.update();
 +    document.querySelector('#nonvr').style.display = 'none';

threejs/lessons/zh_cn/threejs-prerequisites.md

@@ -38,7 +38,6 @@ DOM元素。假设你知道如何使用 `<script>`标签来
   <body>
      ...
   </body>
-  <script src="script1.js"></script>
   <script>
     // inline javascript
   </script>

threejs/threejs-lights-rectarea.html

@@ -23,11 +23,13 @@
 <script type="module">
 import * as THREE from './resources/threejs/r108/build/three.module.js';
 import {OrbitControls} from './resources/threejs/r108/examples/jsm/controls/OrbitControls.js';
+import {RectAreaLightUniformsLib} from './resources/threejs/r108/examples/jsm/lights/RectAreaLightUniformsLib.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  RectAreaLightUniformsLib.init();
 
   const fov = 45;
   const aspect = 2;  // the canvas default