bump three to r113

threejs/background-v01.html

@@ -22,9 +22,9 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/background.html

@@ -22,9 +22,9 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -190,8 +190,8 @@ function main() {
 
     if (resizeRendererToDisplaySize(renderer)) {
       const aspect = canvas.clientWidth / canvas.clientHeight;
-      const fovX = THREE.Math.radToDeg(2 * Math.atan(Math.tan(THREE.Math.degToRad(fov) * 0.5) * aspect));
-      const newFovY = THREE.Math.radToDeg(2 * Math.atan(Math.tan(THREE.Math.degToRad(maxFovX) * .5) / aspect));
+      const fovX = THREE.MathUtils.radToDeg(2 * Math.atan(Math.tan(THREE.MathUtils.degToRad(fov) * 0.5) * aspect));
+      const newFovY = THREE.MathUtils.radToDeg(2 * Math.atan(Math.tan(THREE.MathUtils.degToRad(maxFovX) * .5) / aspect));
       camera.fov = fovX > maxFovX ? newFovY : fov;
       camera.aspect = aspect;
       camera.updateProjectionMatrix();

threejs/lessons/resources/lesson.js

@@ -243,7 +243,7 @@ $(document).ready(function($){
     Sprite: 'https://threejs.org/docs/#api/objects/Sprite',
     WebGLRenderer: 'https://threejs.org/docs/#api/renderers/WebGLRenderer',
     WebGLRenderTarget: 'https://threejs.org/docs/#api/renderers/WebGLRenderTarget',
-    WebGLRenderTargetCube: 'https://threejs.org/docs/#api/renderers/WebGLRenderTargetCube',
+    WebGLCubeRenderTarget: 'https://threejs.org/docs/#api/renderers/WebGLCubeRenderTarget',
     ShaderChunk: 'https://threejs.org/docs/#api/renderers/shaders/ShaderChunk',
     ShaderLib: 'https://threejs.org/docs/#api/renderers/shaders/ShaderLib',
     UniformsLib: 'https://threejs.org/docs/#api/renderers/shaders/UniformsLib',

threejs/lessons/resources/threejs-align-html-elements-to-3d.js

@@ -49,7 +49,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
   }
 
   const THREE = {
-    Math: {
+    MathUtils: {
       radToDeg(rad) {
         return rad * 180 / Math.PI;
       },
@@ -65,10 +65,10 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
       this.prop = prop;
     }
     get value() {
-      return THREE.Math.radToDeg(this.obj[this.prop]);
+      return THREE.MathUtils.radToDeg(this.obj[this.prop]);
     }
     set value(v) {
-      this.obj[this.prop] = THREE.Math.degToRad(v);
+      this.obj[this.prop] = THREE.MathUtils.degToRad(v);
     }
   }
 

threejs/lessons/resources/threejs-cameras.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {
@@ -56,7 +56,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         mat.multiply(perspMat);
         mat.multiply(inMat);
 
-        geometry.applyMatrix(mat);
+        geometry.applyMatrix4(mat);
         geometry.computeBoundingBox();
         geometry.center();
         geometry.scale(3, 3, 3);

threejs/lessons/resources/threejs-custom-buffergeometry.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-fog.js

@@ -1,5 +1,5 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
-import {GLTFLoader} from '../../resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
+import {GLTFLoader} from '../../resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-lesson-utils.js

@@ -1,5 +1,5 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
-import {TrackballControls} from '../../resources/threejs/r112/examples/jsm/controls/TrackballControls.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
+import {TrackballControls} from '../../resources/threejs/r113/examples/jsm/controls/TrackballControls.js';
 
 export const threejsLessonUtils = {
   init() {
@@ -192,7 +192,7 @@ export const threejsLessonUtils = {
       const aspect = renderInfo.width / renderInfo.height;
       const fovDeg = aspect >= 1
         ? targetFOVDeg
-        : THREE.Math.radToDeg(2 * Math.atan(Math.tan(THREE.Math.degToRad(targetFOVDeg) * .5) / aspect));
+        : THREE.MathUtils.radToDeg(2 * Math.atan(Math.tan(THREE.MathUtils.degToRad(targetFOVDeg) * .5) / aspect));
 
       camera.fov = fovDeg;
       camera.aspect = aspect;

threejs/lessons/resources/threejs-lights.js

@@ -1,5 +1,5 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from '../../resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from '../../resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-lots-of-objects.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 import {GUI} from '../../../3rdparty/dat.gui.module.js';
 
@@ -9,10 +9,10 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
       this.prop = prop;
     }
     get value() {
-      return THREE.Math.radToDeg(this.obj[this.prop]);
+      return THREE.MathUtils.radToDeg(this.obj[this.prop]);
     }
     set value(v) {
-      this.obj[this.prop] = THREE.Math.degToRad(v);
+      this.obj[this.prop] = THREE.MathUtils.degToRad(v);
     }
   }
 
@@ -21,7 +21,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
 
     const size = 3;
     const geometry = new THREE.BoxBufferGeometry(size, size, size);
-    geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, zOffset * size));
+    geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, zOffset * size));
     const material = new THREE.MeshBasicMaterial({
       color: 'red',
     });
@@ -43,7 +43,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
     return {
       obj3D: root,
       update: (time) => {
-        const s = THREE.Math.lerp(0.5, 2, Math.sin(time) * .5 + .5);
+        const s = THREE.MathUtils.lerp(0.5, 2, Math.sin(time) * .5 + .5);
         cube.scale.set(s, s, s);
       },
     };

threejs/lessons/resources/threejs-materials.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-primitives.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-textures.js

@@ -1,4 +1,4 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {

threejs/lessons/resources/threejs-voxel-geometry.js

@@ -1,5 +1,5 @@
-import * as THREE from '../../resources/threejs/r112/build/three.module.js';
-import {BufferGeometryUtils} from '../../resources/threejs/r112/examples/jsm/utils/BufferGeometryUtils.js';
+import * as THREE from '../../resources/threejs/r113/build/three.module.js';
+import {BufferGeometryUtils} from '../../resources/threejs/r113/examples/jsm/utils/BufferGeometryUtils.js';
 import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
 {
@@ -26,7 +26,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
           for (let z = 0; z < depth; ++z) {
             for (let x = 0; x < width; ++x) {
               const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
-              geometry.applyMatrix((new THREE.Matrix4()).makeTranslation(x, y, z));
+              geometry.applyMatrix4((new THREE.Matrix4()).makeTranslation(x, y, z));
               geometries.push(geometry);
             }
           }

threejs/lessons/ru/threejs-fundamentals.md

@@ -42,7 +42,7 @@ Three.js будет рисовать на этом холсте, так что
 
 ```
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/lessons/ru/threejs-lights.md

@@ -29,8 +29,8 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 включить их в нашу страницу.
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 Теперь мы можем использовать их. Мы передаем в `OrbitControls` камеру для 
@@ -469,9 +469,9 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 Для использования `RectAreaLight` нам нужно включить некоторые дополнительные возможности three.js
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {RectAreaLightUniformsLib} from './resources/threejs/r112/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from './resources/threejs/r112/examples/jsm/helpers/RectAreaLightHelper.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {RectAreaLightUniformsLib} from './resources/threejs/r113/examples/jsm/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from './resources/threejs/r113/examples/jsm/helpers/RectAreaLightHelper.js';
 ```
 
 ```js
@@ -493,7 +493,7 @@ const color = 0xFFFFFF;
 +const height = 4;
 *const light = new THREE.RectAreaLight(color, intensity, width, height);
 light.position.set(0, 10, 0);
-+light.rotation.x = THREE.Math.degToRad(30);
++light.rotation.x = THREE.MathUtils.degToRad(30);
 scene.add(light);
 
 *const helper = new RectAreaLightHelper(light);

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

@@ -472,7 +472,7 @@ document.querySelectorAll('[data-diagram]').forEach((elem) => {
 Сначала мы добавляем скрипт для контролов.
 
 ```js
-import {TrackballControls} from './resources/threejs/r112/examples/jsm/controls/TrackballControls.js';
+import {TrackballControls} from './resources/threejs/r113/examples/jsm/controls/TrackballControls.js';
 ```
 
 И затем мы можем добавить `TrackballControls` к каждой сцене, передавая элемент, связанный с этой сценой.

threejs/lessons/ru/threejs-textures.md

@@ -502,7 +502,7 @@ someTexture.offset.set(xOffset, yOffset);`
 
 ```js
 someTexture.center.set(.5, .5);
-someTexture.rotation = THREE.Math.degToRad(45); 
+someTexture.rotation = THREE.MathUtils.degToRad(45); 
 ```
 
 Давайте изменим верхний пример выше, чтобы играть с этими значениями
@@ -535,10 +535,10 @@ class DegRadHelper {
     this.prop = prop;
   }
   get value() {
-    return THREE.Math.radToDeg(this.obj[this.prop]);
+    return THREE.MathUtils.radToDeg(this.obj[this.prop]);
   }
   set value(v) {
-    this.obj[this.prop] = THREE.Math.degToRad(v);
+    this.obj[this.prop] = THREE.MathUtils.degToRad(v);
   }
 }
 ```

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

@@ -35,8 +35,8 @@ 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).
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js
@@ -295,7 +295,7 @@ someMesh.updateMatrixWorld();
 
 viewProjection.multiplyMatrices(
     camera.projectionMatrix, camera.matrixWorldInverse);
-frustum.setFromMatrix(viewProjection);
+frustum.setFromProjectionMatrix(viewProjection);
 const inFrustum = frustum.contains(someMesh));
 ```
 
@@ -475,8 +475,8 @@ for (const countryInfo of countryInfos) {
   const {lat, lon, name} = countryInfo;
 
   // adjust the helpers to point to the latitude and longitude
-  lonHelper.rotation.y = THREE.Math.degToRad(lon) + lonFudge;
-  latHelper.rotation.x = THREE.Math.degToRad(lat) + latFudge;
+  lonHelper.rotation.y = THREE.MathUtils.degToRad(lon) + lonFudge;
+  latHelper.rotation.x = THREE.MathUtils.degToRad(lat) + latFudge;
 
   // get the position of the lat/lon
   positionHelper.updateWorldMatrix(true, false);
@@ -675,8 +675,8 @@ for (const countryInfo of countryInfos) {
   const {lat, lon, min, max, name} = countryInfo;
 
   // adjust the helpers to point to the latitude and longitude
-  lonHelper.rotation.y = THREE.Math.degToRad(lon) + lonFudge;
-  latHelper.rotation.x = THREE.Math.degToRad(lat) + latFudge;
+  lonHelper.rotation.y = THREE.MathUtils.degToRad(lon) + lonFudge;
+  latHelper.rotation.x = THREE.MathUtils.degToRad(lat) + latFudge;
 
   // get the position of the lat/lon
   positionHelper.updateWorldMatrix(true, false);
@@ -724,8 +724,8 @@ Finally, since I'm not sure what good values are for these settings lets
 add a GUI so we can play with them
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 +import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 

threejs/lessons/threejs-backgrounds.md

@@ -180,7 +180,7 @@ function render(time) {
 Let's add some controls in so we can rotate the camera.
 
 ```js
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js

threejs/lessons/threejs-billboards.md

@@ -179,7 +179,7 @@ in [the article on render targets](threejs-rendertargets.html).
 ```js
 function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
   const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
-  const halfFovY = THREE.Math.degToRad(camera.fov * .5);
+  const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
   const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
 
   camera.position.copy(boxCenter);

threejs/lessons/threejs-canvas-textures.md

@@ -261,8 +261,8 @@ What's left is to add some `OrbitControls` so we can move
 the camera.
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js

threejs/lessons/threejs-custom-buffergeometry.md

@@ -445,7 +445,7 @@ for (let i = 0; i < positions.length; i += 3) {
   const ringU = ringQuadId / segmentsAround;
   const angle = ringU * Math.PI * 2;
   temp.fromArray(normals, i);
-  temp.multiplyScalar(THREE.Math.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
+  temp.multiplyScalar(THREE.MathUtils.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
   temp.toArray(positions, i);
 }
 positionAttribute.needsUpdate = true;

threejs/lessons/threejs-custom-geometry.md

@@ -448,8 +448,8 @@ A few minor changes to make it easier to view.
 * include the `OrbitControls`
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 ```js

threejs/lessons/threejs-fundamentals.md

@@ -96,7 +96,7 @@ First let's load three.js
 
 ```html
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 </script>
 ```
 
@@ -119,7 +119,7 @@ We will ask three.js to draw into that canvas so we need to look it up.
 
 ```html
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 +function main() {
 +  const canvas = document.querySelector('#c');
@@ -416,7 +416,7 @@ both
 </p>
 <pre class=prettyprint>
 &lt;script type="module"&gt;
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 ...
 

threejs/lessons/threejs-game.md

@@ -243,10 +243,10 @@ it for skinned animated characters. Fortunately there's a utility function,
 the utils.
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
-+import {SkeletonUtils} from './resources/threejs/r112/examples/jsm/utils/SkeletonUtils.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
++import {SkeletonUtils} from './resources/threejs/r113/examples/jsm/utils/SkeletonUtils.js';
 ```
 
 Then we can clone the models we just loaded
@@ -1015,7 +1015,7 @@ class CameraInfo extends Component {
     this.projScreenMatrix.multiplyMatrices(
         camera.projectionMatrix,
         camera.matrixWorldInverse);
-    this.frustum.setFromMatrix(this.projScreenMatrix);
+    this.frustum.setFromProjectionMatrix(this.projScreenMatrix);
   }
 }
 ```
@@ -1410,7 +1410,7 @@ const aimTowardAndGetDistance = function() {
     // make sure we don't turn faster than maxTurn
     const deltaRotation = minMagnitude(deltaRot, maxTurn);
     // keep rotation between 0 and Math.PI * 2
-    source.rotation.y = THREE.Math.euclideanModulo(
+    source.rotation.y = THREE.MathUtils.euclideanModulo(
         source.rotation.y + deltaRotation, Math.PI * 2);
     // return the distance to the target
     return delta.length();
@@ -1680,7 +1680,7 @@ class Animal extends Component {
   }
   update() {
     this.fsm.update();
-+    const dir = THREE.Math.radToDeg(this.gameObject.transform.rotation.y);
++    const dir = THREE.MathUtils.radToDeg(this.gameObject.transform.rotation.y);
 +    this.helper.setState(`${this.fsm.state}:${dir.toFixed(0)}`);
   }
 }
@@ -1690,10 +1690,10 @@ While we're at it lets make it so we can turn them on/off using dat.GUI like
 we've used else where
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
-import {SkeletonUtils} from './resources/threejs/r112/examples/jsm/utils/SkeletonUtils.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
+import {SkeletonUtils} from './resources/threejs/r113/examples/jsm/utils/SkeletonUtils.js';
 +import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 

threejs/lessons/threejs-lights.md

@@ -29,8 +29,8 @@ an optional feature of three.js so first we need to include them
 in our page
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 Then we can use them. We pass the `OrbitControls` a camera to
@@ -477,9 +477,9 @@ To use the `RectAreaLight` we need to include some extra three.js optional data
 include the `RectAreaLightHelper` to help us visualize the light
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {RectAreaLightUniformsLib} from './resources/threejs/r112/examples/jsm/lights/RectAreaLightUniformsLib.js';
-+import {RectAreaLightHelper} from './resources/threejs/r112/examples/jsm/helpers/RectAreaLightHelper.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {RectAreaLightUniformsLib} from './resources/threejs/r113/examples/jsm/lights/RectAreaLightUniformsLib.js';
++import {RectAreaLightHelper} from './resources/threejs/r113/examples/jsm/helpers/RectAreaLightHelper.js';
 ```
 
 and we need to call `RectAreaLightUniformsLib.init`
@@ -503,7 +503,7 @@ const color = 0xFFFFFF;
 +const height = 4;
 *const light = new THREE.RectAreaLight(color, intensity, width, height);
 light.position.set(0, 10, 0);
-+light.rotation.x = THREE.Math.degToRad(-90);
++light.rotation.x = THREE.MathUtils.degToRad(-90);
 scene.add(light);
 
 *const helper = new RectAreaLightHelper(light);

threejs/lessons/threejs-load-gltf.md

@@ -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
--import {LoaderSupport} from './resources/threejs/r112/examples/jsm/loaders/LoaderSupport.js';
--import {OBJLoader2} from './resources/threejs/r112/examples/jsm/loaders/OBJLoader2.js';
--import {MTLLoader} from './resources/threejs/r112/examples/jsm/loaders/MTLLoader.js';
-+import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
+-import {LoaderSupport} from './resources/threejs/r113/examples/jsm/loaders/LoaderSupport.js';
+-import {OBJLoader2} from './resources/threejs/r113/examples/jsm/loaders/OBJLoader2.js';
+-import {MTLLoader} from './resources/threejs/r113/examples/jsm/loaders/MTLLoader.js';
++import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
 ```
 
 And running that we get

threejs/lessons/threejs-load-obj.md

@@ -46,7 +46,7 @@ that were being added to the scene.
 From that the first thing we need to do is include the `OBJLoader2` loader in our script.
 
 ```js
-import {OBJLoader2} from './resources/threejs/r112/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader2} from './resources/threejs/r113/examples/jsm/loaders/OBJLoader2.js';
 ```
 
 Then to load the .OBJ file we create an instance of `OBJLoader2`,
@@ -143,11 +143,11 @@ Now that we have the textures available we can load the .MTL file.
 First we need to include the `MTLLoader` and the `MtlObjBridge`;
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r112/examples/jsm/loaders/OBJLoader2.js';
-+import {MTLLoader} from './resources/threejs/r112/examples/jsm/loaders/MTLLoader.js';
-+import {MtlObjBridge} from './resources/threejs/r112/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {OBJLoader2} from './resources/threejs/r113/examples/jsm/loaders/OBJLoader2.js';
++import {MTLLoader} from './resources/threejs/r113/examples/jsm/loaders/MTLLoader.js';
++import {MtlObjBridge} from './resources/threejs/r113/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
 Then we first load the .MTL file. When it's finished loading we add
@@ -361,7 +361,7 @@ camera at the `center` of the box.
 ```js
 function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
   const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
-  const halfFovY = THREE.Math.degToRad(camera.fov * .5);
+  const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
   const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
 
   // compute a unit vector that points in the direction the camera is now

threejs/lessons/threejs-multiple-scenes.md

@@ -445,7 +445,7 @@ 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.
 
 ```js
-import {TrackballControls} from './resources/threejs/r112/examples/jsm/controls/TrackballControls.js';
+import {TrackballControls} from './resources/threejs/r113/examples/jsm/controls/TrackballControls.js';
 ```
 
 And then we can add a `TrackballControls` to each scene passing in the element associated with that scene.

threejs/lessons/threejs-offscreencanvas.md

@@ -96,7 +96,7 @@ So now we just need to start changing the `main` we pasted into
 The first thing we need to do is include THREE.js into our worker.
 
 ```js
-importScripts('resources/threejs/r112/build/three.min.js');
+importScripts('resources/threejs/r113/build/three.min.js');
 ```
 
 Then instead of looking up the canvas from the DOM we'll receive it from the
@@ -294,7 +294,7 @@ HTML file.
 
 /* global importScripts, init, state */
 
-importScripts('resources/threejs/r112/build/three.min.js');
+importScripts('resources/threejs/r113/build/three.min.js');
 +importScripts('shared-cubes.js');
 
 function size(data) {
@@ -322,7 +322,7 @@ note we include `shared-cubes.js` which is all our three.js code
 Similarly we need to include three.js and  `shared-cubes.js` in the main page
 
 ```html
-<script src="resources/threejs/r112/build/three.min.js"></script>
+<script src="resources/threejs/r113/build/three.min.js"></script>
 <script src="shared-cubes.js"><script>
 ```
 We can remove the HTML and CSS we added previously
@@ -614,7 +614,7 @@ of the DOM events they use. Maybe we could pass in our own
 object that has the same API surface as a DOM element. 
 We only need to support the features the OrbitControls need.
 
-Digging through the [OrbitControls source code](https://github.com/gfxfundamentals/threejsfundamentals/blob/master/threejs/resources/threejs/r112/examples/js/controls/OrbitControls.js)
+Digging through the [OrbitControls source code](https://github.com/gfxfundamentals/threejsfundamentals/blob/master/threejs/resources/threejs/r113/examples/js/controls/OrbitControls.js)
 it looks like we need to handle the following events.
 
 * contextmenu
@@ -732,8 +732,8 @@ We also need to actually add the `OrbitControls` to the top of
 the script
 
 ```js
-importScripts('resources/threejs/r112/build/three.min/js');
-+importScripts('resources/threejs/r112/examples/js/controls/OrbitControls.js');
+importScripts('resources/threejs/r113/build/three.min/js');
++importScripts('resources/threejs/r113/examples/js/controls/OrbitControls.js');
 *importScripts('shared-orbitcontrols.js');
 ```
 

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

@@ -212,8 +212,8 @@ The one more change we need from the previous example is we need to make
   ...
 
     // compute a color
--    const hue = THREE.Math.lerp(0.7, 0.3, amount);
-+    const hue = THREE.Math.lerp(...hueRange, amount);
+-    const hue = THREE.MathUtils.lerp(0.7, 0.3, amount);
++    const hue = THREE.MathUtils.lerp(...hueRange, amount);
 
   ...
 ```
@@ -377,10 +377,10 @@ because the original webgl globe uses
 We need to include the library
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {BufferGeometryUtils} from './resources/threejs/r112/examples/jsm/utils/BufferGeometryUtils.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-+import {TWEEN} from './resources/threejs/r112/examples/jsm/libs/tween.min.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {BufferGeometryUtils} from './resources/threejs/r113/examples/jsm/utils/BufferGeometryUtils.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
++import {TWEEN} from './resources/threejs/r113/examples/jsm/libs/tween.min.js';
 ```
 
 And then create a `Tween` to animate the influences.

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

@@ -194,7 +194,7 @@ function addBoxes(file) {
   const boxDepth = 1;
   const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
   // make it so it scales away from the positive Z axis
-  geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
+  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
   // these helpers will make it easy to position the boxes
   // We can rotate the lon helper on its Y axis to the longitude
@@ -217,23 +217,23 @@ function addBoxes(file) {
       }
       const amount = (value - min) / range;
       const material = new THREE.MeshBasicMaterial();
-      const hue = THREE.Math.lerp(0.7, 0.3, amount);
+      const hue = THREE.MathUtils.lerp(0.7, 0.3, amount);
       const saturation = 1;
-      const lightness = THREE.Math.lerp(0.1, 1.0, amount);
+      const lightness = THREE.MathUtils.lerp(0.1, 1.0, amount);
       material.color.setHSL(hue, saturation, lightness);
       const mesh = new THREE.Mesh(geometry, material);
       scene.add(mesh);
 
       // adjust the helpers to point to the latitude and longitude
-      lonHelper.rotation.y = THREE.Math.degToRad(lonNdx + file.xllcorner) + lonFudge;
-      latHelper.rotation.x = THREE.Math.degToRad(latNdx + file.yllcorner) + latFudge;
+      lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
+      latHelper.rotation.x = THREE.MathUtils.degToRad(latNdx + file.yllcorner) + latFudge;
 
       // use the world matrix of the position helper to
       // position this mesh.
       positionHelper.updateWorldMatrix(true, false);
-      mesh.applyMatrix(positionHelper.matrixWorld);
+      mesh.applyMatrix4(positionHelper.matrixWorld);
 
-      mesh.scale.set(0.005, 0.005, THREE.Math.lerp(0.01, 0.5, amount));
+      mesh.scale.set(0.005, 0.005, THREE.MathUtils.lerp(0.01, 0.5, amount));
     });
   });
 }
@@ -345,7 +345,7 @@ function addBoxes(file) {
 -  const boxDepth = 1;
 -  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
 -  // make it so it scales away from the positive Z axis
--  geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
+-  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
   // these helpers will make it easy to position the boxes
   // We can rotate the lon helper on its Y axis to the longitude
@@ -374,9 +374,9 @@ function addBoxes(file) {
       const amount = (value - min) / range;
 
 -      const material = new THREE.MeshBasicMaterial();
--      const hue = THREE.Math.lerp(0.7, 0.3, amount);
+-      const hue = THREE.MathUtils.lerp(0.7, 0.3, amount);
 -      const saturation = 1;
--      const lightness = THREE.Math.lerp(0.1, 1.0, amount);
+-      const lightness = THREE.MathUtils.lerp(0.1, 1.0, amount);
 -      material.color.setHSL(hue, saturation, lightness);
 -      const mesh = new THREE.Mesh(geometry, material);
 -      scene.add(mesh);
@@ -387,21 +387,21 @@ function addBoxes(file) {
 +      const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
 
       // adjust the helpers to point to the latitude and longitude
-      lonHelper.rotation.y = THREE.Math.degToRad(lonNdx + file.xllcorner) + lonFudge;
-      latHelper.rotation.x = THREE.Math.degToRad(latNdx + file.yllcorner) + latFudge;
+      lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
+      latHelper.rotation.x = THREE.MathUtils.degToRad(latNdx + file.yllcorner) + latFudge;
 
 -      // use the world matrix of the position helper to
 -      // position this mesh.
 -      positionHelper.updateWorldMatrix(true, false);
--      mesh.applyMatrix(positionHelper.matrixWorld);
+-      mesh.applyMatrix4(positionHelper.matrixWorld);
 -
--      mesh.scale.set(0.005, 0.005, THREE.Math.lerp(0.01, 0.5, amount));
+-      mesh.scale.set(0.005, 0.005, THREE.MathUtils.lerp(0.01, 0.5, amount));
 
 +      // use the world matrix of the origin helper to
 +      // position this geometry
-+      positionHelper.scale.set(0.005, 0.005, THREE.Math.lerp(0.01, 0.5, amount));
++      positionHelper.scale.set(0.005, 0.005, THREE.MathUtils.lerp(0.01, 0.5, amount));
 +      originHelper.updateWorldMatrix(true, false);
-+      geometry.applyMatrix(originHelper.matrixWorld);
++      geometry.applyMatrix4(originHelper.matrixWorld);
 +
 +      geometries.push(geometry);
     });
@@ -429,7 +429,7 @@ them into a single mesh.
 We also need to include the `BufferGeometryUtils`
 
 ```js
-import {BufferGeometryUtils} from './resources/threejs/r112/examples/jsm/utils/BufferGeometryUtils.js';
+import {BufferGeometryUtils} from './resources/threejs/r113/examples/jsm/utils/BufferGeometryUtils.js';
 ```
 
 And now, at least on my machine, I get 60 frames per second
@@ -462,19 +462,19 @@ data.forEach((row, latNdx) => {
     const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
 
     // adjust the helpers to point to the latitude and longitude
-    lonHelper.rotation.y = THREE.Math.degToRad(lonNdx + file.xllcorner) + lonFudge;
-    latHelper.rotation.x = THREE.Math.degToRad(latNdx + file.yllcorner) + latFudge;
+    lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
+    latHelper.rotation.x = THREE.MathUtils.degToRad(latNdx + file.yllcorner) + latFudge;
 
     // use the world matrix of the origin helper to
     // position this geometry
-    positionHelper.scale.set(0.005, 0.005, THREE.Math.lerp(0.01, 0.5, amount));
+    positionHelper.scale.set(0.005, 0.005, THREE.MathUtils.lerp(0.01, 0.5, amount));
     originHelper.updateWorldMatrix(true, false);
-    geometry.applyMatrix(originHelper.matrixWorld);
+    geometry.applyMatrix4(originHelper.matrixWorld);
 
 +    // compute a color
-+    const hue = THREE.Math.lerp(0.7, 0.3, amount);
++    const hue = THREE.MathUtils.lerp(0.7, 0.3, amount);
 +    const saturation = 1;
-+    const lightness = THREE.Math.lerp(0.4, 1.0, amount);
++    const lightness = THREE.MathUtils.lerp(0.4, 1.0, amount);
 +    color.setHSL(hue, saturation, lightness);
 +    // get the colors as an array of values from 0 to 255
 +    const rgb = color.toArray().map(v => v * 255);

threejs/lessons/threejs-post-processing.md

@@ -107,10 +107,10 @@ render to the next render target.
 To use these classes we need to import a bunch of scripts.
 
 ```js
-import {EffectComposer} from './resources/threejs/r112/examples/jsm/postprocessing/EffectComposer.js';
-import {RenderPass} from './resources/threejs/r112/examples/jsm/postprocessing/RenderPass.js';
-import {BloomPass} from './resources/threejs/r112/examples/jsm/postprocessing/BloomPass.js';
-import {FilmPass} from './resources/threejs/r112/examples/jsm/postprocessing/FilmPass.js';
+import {EffectComposer} from './resources/threejs/r113/examples/jsm/postprocessing/EffectComposer.js';
+import {RenderPass} from './resources/threejs/r113/examples/jsm/postprocessing/RenderPass.js';
+import {BloomPass} from './resources/threejs/r113/examples/jsm/postprocessing/BloomPass.js';
+import {FilmPass} from './resources/threejs/r113/examples/jsm/postprocessing/FilmPass.js';
 ```
 
 For pretty much any post processing `EffectComposer.js`, and `RenderPass.js`

threejs/lessons/threejs-prerequisites.md

@@ -24,7 +24,7 @@ both
 
 ```html
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 ...
 

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

@@ -30,8 +30,8 @@ First we'll add in the `OrbitControls` so there is something that could change
 that we can render in response to.
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 ```
 
 and set them up
@@ -179,8 +179,8 @@ below slides.
 Let's also add a simple dat.GUI GUI and make its changes render on demand.
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 +import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 

threejs/lessons/threejs-shadows.md

@@ -221,9 +221,9 @@ function render(time) {
     // yOff is a value that goes from 0 to 1
     const yOff = Math.abs(Math.sin(time * 2 + ndx));
     // move the sphere up and down
-    sphereMesh.position.y = y + THREE.Math.lerp(-2, 2, yOff);
+    sphereMesh.position.y = y + THREE.MathUtils.lerp(-2, 2, yOff);
     // fade the shadow as the sphere goes up
-    shadowMesh.material.opacity = THREE.Math.lerp(1, .25, yOff);
+    shadowMesh.material.opacity = THREE.MathUtils.lerp(1, .25, yOff);
   });
 
   ...

threejs/lessons/threejs-textures.md

@@ -511,7 +511,7 @@ around the center of the texture.
 
 ```js
 someTexture.center.set(.5, .5);
-someTexture.rotation = THREE.Math.degToRad(45);
+someTexture.rotation = THREE.MathUtils.degToRad(45);
 ```
 
 Let's modify the top sample above to play with these values
@@ -543,10 +543,10 @@ class DegRadHelper {
     this.prop = prop;
   }
   get value() {
-    return THREE.Math.radToDeg(this.obj[this.prop]);
+    return THREE.MathUtils.radToDeg(this.obj[this.prop]);
   }
   set value(v) {
-    this.obj[this.prop] = THREE.Math.degToRad(v);
+    this.obj[this.prop] = THREE.MathUtils.degToRad(v);
   }
 }
 ```

threejs/lessons/threejs-transparency.md

@@ -381,8 +381,8 @@ gui.add(new AllMaterialPropertyGUIHelper('transparent', scene), 'value')
 and of course we need to include dat.gui
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 +import {GUI} from '../3rdparty/dat.gui.module.js';
 ```
 

threejs/lessons/threejs-voxel-geometry.md

@@ -348,9 +348,9 @@ class VoxelWorld {
 +      return 0;
 +    }
 +    const {cellSize} = this;
-+    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
-+    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
-+    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
++    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
++    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
++    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
 +    const voxelOffset = voxelY * cellSize * cellSize +
 +                        voxelZ * cellSize +
 +                        voxelX;
@@ -387,9 +387,9 @@ class VoxelWorld {
 +      return;  // TODO: add a new cell?
 +    }
 +    const {cellSize} = this;
-+    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
-+    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
-+    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
++    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
++    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
++    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
 +    const voxelOffset = voxelY * cellSize * cellSize +
 +                        voxelZ * cellSize +
 +                        voxelX;
@@ -401,9 +401,9 @@ class VoxelWorld {
       return 0;
     }
     const {cellSize} = this;
-    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
-    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
-    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
+    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
+    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
+    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
     const voxelOffset = voxelY * cellSize * cellSize +
                         voxelZ * cellSize +
                         voxelX;
@@ -436,9 +436,9 @@ class VoxelWorld {
   }
 +  computeVoxelOffset(x, y, z) {
 +    const {cellSize, cellSliceSize} = this;
-+    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
-+    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
-+    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
++    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
++    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
++    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
 +    return voxelY * cellSliceSize +
 +           voxelZ * cellSize +
 +           voxelX;
@@ -449,9 +449,9 @@ class VoxelWorld {
       return;  // TODO: add a new cell?
     }
 -    const {cellSize} = this;
--    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
--    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
--    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
+-    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
+-    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
+-    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
 -    const voxelOffset = voxelY * cellSize * cellSize +
 -                        voxelZ * cellSize +
 -                        voxelX;
@@ -464,9 +464,9 @@ class VoxelWorld {
       return 0;
     }
 -    const {cellSize} = this;
--    const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
--    const voxelY = THREE.Math.euclideanModulo(y, cellSize) | 0;
--    const voxelZ = THREE.Math.euclideanModulo(z, cellSize) | 0;
+-    const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
+-    const voxelY = THREE.MathUtils.euclideanModulo(y, cellSize) | 0;
+-    const voxelZ = THREE.MathUtils.euclideanModulo(z, cellSize) | 0;
 -    const voxelOffset = voxelY * cellSize * cellSize +
 -                        voxelZ * cellSize +
 -                        voxelX;
@@ -1096,7 +1096,7 @@ function updateVoxelGeometry(x, y, z) {
 I thought about checking for adjacent cells like 
 
 ```js
-const voxelX = THREE.Math.euclideanModulo(x, cellSize) | 0;
+const voxelX = THREE.MathUtils.euclideanModulo(x, cellSize) | 0;
 if (voxelX === 0) {
   // update cell to the left
 } else if (voxelX === cellSize - 1) {

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

@@ -187,7 +187,7 @@ function render(time) {
 +  const fromEnd = 2;
 +  const toStart = -0.5;
 +  const toEnd = 0.5;
-+  cursorTexture.offset.x = THREE.Math.mapLinear(
++  cursorTexture.offset.x = THREE.MathUtils.mapLinear(
 +      time % 2,
 +      fromStart, fromEnd,
 +      toStart, toEnd);
@@ -196,7 +196,7 @@ function render(time) {
 }
 ```
 
-`THREE.Math.mapLinear` takes a value that goes between `fromStart` and `fromEnd`
+`THREE.MathUtils.mapLinear` takes a value that goes between `fromStart` and `fromEnd`
 and maps it to a value between `toStart` and `toEnd`. In the case above we're
 taking `time % 2` which means a value that goes from 0 to 2 and maps
 that to a value that goes from -0.5 to 0.5
@@ -360,7 +360,7 @@ class PickHelper {
 +    const fromEnd = this.selectDuration;
 +    const toStart = -0.5;
 +    const toEnd = 0.5;
-+    this.cursorTexture.offset.x = THREE.Math.mapLinear(
++    this.cursorTexture.offset.x = THREE.MathUtils.mapLinear(
 +        this.selectTimer,
 +        fromStart, fromEnd,
 +        toStart, toEnd);

threejs/lessons/threejs-webvr.md

@@ -52,8 +52,8 @@ The first thing we need to do is include the VR support after
 including three.js
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-+import {VRButton} from './resources/threejs/r112/examples/jsm/webxr/VRButton.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
++import {VRButton} from './resources/threejs/r113/examples/jsm/webxr/VRButton.js';
 ```
 
 Then we need to enable three.js's WebXR support and add its

threejs/lessons/zh_cn/threejs-fundamentals.md

@@ -35,7 +35,7 @@ Three.js将会使用这个canvas标签所以我们要先获取它然后传给thr
 
 ```html
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/lessons/zh_cn/threejs-load-obj.md

@@ -28,7 +28,7 @@ TOC: 加载 .OBJ 文件
 第一件要做的事就是将`OBJLoader2`添加到代码中。
 
 ```js
-import {OBJLoader2} from './resources/threejs/r112/examples/jsm/loaders/OBJLoader2.js';
+import {OBJLoader2} from './resources/threejs/r113/examples/jsm/loaders/OBJLoader2.js';
 ```
 
 然后创建`OBJLoader2`的实例并通过URL加载我们的.OBJ文件，并在回调函数中将已加载完的模型添加到场景（scene）里。
@@ -109,11 +109,11 @@ map_Ns windmill_001_base_SPEC.jpg
 首先要引用 `MTLLoader` 和 `MtlObjBridge`;
 
 ```js
-import * as THREE from './resources/three/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {OBJLoader2} from './resources/threejs/r112/examples/jsm/loaders/OBJLoader2.js';
-+import {MTLLoader} from './resources/threejs/r112/examples/jsm/loaders/MTLLoader.js';
-+import {MtlObjBridge} from './resources/threejs/r112/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
+import * as THREE from './resources/three/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {OBJLoader2} from './resources/threejs/r113/examples/jsm/loaders/OBJLoader2.js';
++import {MTLLoader} from './resources/threejs/r113/examples/jsm/loaders/MTLLoader.js';
++import {MtlObjBridge} from './resources/threejs/r113/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
 ```
 
 然后我们先加载.MTL文件，在它加载完材质后利用`MtlObjBridge`将材质传给`OBJLoader2`，再加载.OBJ文件。
@@ -288,7 +288,7 @@ distance = halfSizeToFitOnScreen / tangent(halfFovY)
 ```js
 function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
   const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
-  const halfFovY = THREE.Math.degToRad(camera.fov * .5);
+  const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
   const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
 
   // compute a unit vector that points in the direction the camera is now

threejs/offscreencanvas-cubes.js

@@ -2,7 +2,7 @@
 
 /* global importScripts, THREE */
 
-importScripts('resources/threejs/r112/build/three.min.js');
+importScripts('resources/threejs/r113/build/three.min.js');
 
 const state = {
   width: 300,   // canvas default

threejs/offscreencanvas-worker-cubes.js

@@ -2,7 +2,7 @@
 
 /* global importScripts, init, state */
 
-importScripts('resources/threejs/r112/build/three.min.js');
+importScripts('resources/threejs/r113/build/three.min.js');
 importScripts('shared-cubes.js');
 
 function size(data) {

threejs/offscreencanvas-worker-orbitcontrols.js

@@ -2,8 +2,8 @@
 
 /* global importScripts, init, THREE */
 
-importScripts('resources/threejs/r112/build/three.min.js');
-importScripts('resources/threejs/r112/examples/js/controls/OrbitControls.js');
+importScripts('resources/threejs/r113/build/three.min.js');
+importScripts('resources/threejs/r113/examples/js/controls/OrbitControls.js');
 importScripts('shared-orbitcontrols.js');
 
 function noop() {

threejs/offscreencanvas-worker-picking.js

@@ -2,7 +2,7 @@
 
 /* global importScripts, init, state, pickPosition */
 
-importScripts('resources/threejs/r112/build/three.min.js');
+importScripts('resources/threejs/r113/build/three.min.js');
 importScripts('shared-picking.js');
 
 function size(data) {

threejs/threejs-align-html-elements-to-3d-globe-too-many-labels.html

@@ -58,8 +58,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -117,8 +117,8 @@ function main() {
       const {lat, lon, name} = countryInfo;
 
       // adjust the helpers to point to the latitude and longitude
-      lonHelper.rotation.y = THREE.Math.degToRad(lon) + lonFudge;
-      latHelper.rotation.x = THREE.Math.degToRad(lat) + latFudge;
+      lonHelper.rotation.y = THREE.MathUtils.degToRad(lon) + lonFudge;
+      latHelper.rotation.x = THREE.MathUtils.degToRad(lat) + latFudge;
 
       // get the position of the lat/lon
       positionHelper.updateWorldMatrix(true, false);

threejs/threejs-align-html-elements-to-3d-globe.html

@@ -58,8 +58,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {
@@ -118,8 +118,8 @@ function main() {
       const {lat, lon, min, max, name} = countryInfo;
 
       // adjust the helpers to point to the latitude and longitude
-      lonHelper.rotation.y = THREE.Math.degToRad(lon) + lonFudge;
-      latHelper.rotation.x = THREE.Math.degToRad(lat) + latFudge;
+      lonHelper.rotation.y = THREE.MathUtils.degToRad(lon) + lonFudge;
+      latHelper.rotation.x = THREE.MathUtils.degToRad(lat) + latFudge;
 
       // get the position of the lat/lon
       positionHelper.updateWorldMatrix(true, false);

threejs/threejs-align-html-to-3d-w-hiding.html

@@ -55,8 +55,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-align-html-to-3d-w-sorting.html

@@ -57,8 +57,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-align-html-to-3d.html

@@ -55,8 +55,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-css.html

@@ -22,7 +22,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-cubemap.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-equirectangularmap.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-scene-background-fixed-aspect.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-scene-background.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-separate-scene-bad-aspect.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-background-separate-scene.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-billboard-labels-w-sprites-adjust-height.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-billboard-labels-w-sprites.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-billboard-trees-no-billboards.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-billboard-trees-static-billboards.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -86,7 +86,7 @@ function main() {
 
   function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
     const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
-    const halfFovY = THREE.Math.degToRad(camera.fov * .5);
+    const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
     const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
 
     camera.position.copy(boxCenter);

threejs/threejs-cameras-logarithmic-depth-buffer.html

@@ -21,8 +21,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-cameras-orthographic-2-scenes.html

@@ -37,8 +37,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-cameras-orthographic-canvas-top-left-origin.html

@@ -33,7 +33,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-cameras-perspective-2-scenes.html

@@ -37,8 +37,8 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-cameras-perspective.html

@@ -21,8 +21,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-cameras-z-fighting.html

@@ -21,8 +21,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-canvas-textured-cube-qix.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-canvas-textured-cube.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-canvas-textured-labels-one-canvas.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-canvas-textured-labels-scale-to-fit.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-canvas-textured-labels.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-cleanup-loaded-files.html

@@ -25,8 +25,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
 
 class ResourceTracker {
   constructor() {
@@ -117,7 +117,7 @@ function main() {
 
   function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
     const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
-    const halfFovY = THREE.Math.degToRad(camera.fov * .5);
+    const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5);
     const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
     // compute a unit vector that points in the direction the camera is now
     // in the xz plane from the center of the box

threejs/threejs-cleanup-simple.html

@@ -25,7 +25,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 class ResourceTracker {
   constructor() {

threejs/threejs-custom-buffergeometry-cube-indexed.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-buffergeometry-cube-typedarrays.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-buffergeometry-cube.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-buffergeometry-dynamic.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');
@@ -162,7 +162,7 @@ function main() {
       const ringU = ringQuadId / segmentsAround;
       const angle = ringU * Math.PI * 2;
       temp.fromArray(normals, i);
-      temp.multiplyScalar(THREE.Math.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
+      temp.multiplyScalar(THREE.MathUtils.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
       temp.toArray(positions, i);
     }
     positionAttribute.needsUpdate = true;

threejs/threejs-custom-geometry-cube-face-colors.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-cube-face-normals.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-cube-texcoords.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-cube-vertex-colors.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-cube-vertex-normals.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-cube.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-custom-geometry-heightmap.html

@@ -20,8 +20,8 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-debug-js-clearing-logger.html

@@ -33,7 +33,7 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 class ClearingLogger {
   constructor(elem) {

threejs/threejs-debug-js-html-elements.html

@@ -34,7 +34,7 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-debug-js-params.html

@@ -44,7 +44,7 @@
     <div id="info">click to launch</div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 /**
   * Returns the query parameters as a key/value object.

threejs/threejs-debugging-mcve.html

@@ -2,8 +2,8 @@
   <canvas id="c"></canvas>
 </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-fog-gui.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {

threejs/threejs-fog.html

@@ -20,7 +20,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-fundamentals-3-cubes.html

@@ -10,7 +10,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-fundamentals-with-animation.html

@@ -10,7 +10,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-fundamentals-with-light.html

@@ -10,7 +10,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-fundamentals.html

@@ -10,7 +10,7 @@
     <canvas id="c"></canvas>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-game-check-animations.html

@@ -74,10 +74,10 @@
     </div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
-import {SkeletonUtils} from './resources/threejs/r112/examples/jsm/utils/SkeletonUtils.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
+import {SkeletonUtils} from './resources/threejs/r113/examples/jsm/utils/SkeletonUtils.js';
 
 function main() {
   const canvas = document.querySelector('#c');

threejs/threejs-game-conga-line-w-notes.html

@@ -149,10 +149,10 @@
     <div id="labels"></div>
   </body>
 <script type="module">
-import * as THREE from './resources/threejs/r112/build/three.module.js';
-import {OrbitControls} from './resources/threejs/r112/examples/jsm/controls/OrbitControls.js';
-import {GLTFLoader} from './resources/threejs/r112/examples/jsm/loaders/GLTFLoader.js';
-import {SkeletonUtils} from './resources/threejs/r112/examples/jsm/utils/SkeletonUtils.js';
+import * as THREE from './resources/threejs/r113/build/three.module.js';
+import {OrbitControls} from './resources/threejs/r113/examples/jsm/controls/OrbitControls.js';
+import {GLTFLoader} from './resources/threejs/r113/examples/jsm/loaders/GLTFLoader.js';
+import {SkeletonUtils} from './resources/threejs/r113/examples/jsm/utils/SkeletonUtils.js';
 import {GUI} from '../3rdparty/dat.gui.module.js';
 
 function main() {
@@ -561,7 +561,7 @@ function main() {
       this.projScreenMatrix.multiplyMatrices(
           camera.projectionMatrix,
           camera.matrixWorldInverse);
-      this.frustum.setFromMatrix(this.projScreenMatrix);
+      this.frustum.setFromProjectionMatrix(this.projScreenMatrix);
     }
   }
 
@@ -796,7 +796,7 @@ function main() {
       // make sure we don't turn faster than maxTurn
       const deltaRotation = minMagnitude(deltaRot, maxTurn);
       // keep rotation between 0 and Math.PI * 2
-      source.rotation.y = THREE.Math.euclideanModulo(
+      source.rotation.y = THREE.MathUtils.euclideanModulo(
           source.rotation.y + deltaRotation, Math.PI * 2);
       // return the distance to the target
       return delta.length();
@@ -887,7 +887,7 @@ function main() {
     }
     update() {
       this.fsm.update();
-      const dir = THREE.Math.radToDeg(this.gameObject.transform.rotation.y);
+      const dir = THREE.MathUtils.radToDeg(this.gameObject.transform.rotation.y);
       this.helper.setState(`${this.fsm.state}:${dir.toFixed(0)}`);
     }
   }