Upgrade Three.js to r141

2022-06-02 11:35:25 -07:00 · 2022-06-02 11:35:25 -07:00 · 8ddc1fc7db
--- a/package-lock.json
+++ b/package-lock.json
@ -15829,7 +15829,7 @@
      "dev": true
    },
    "aframe": {
-      "version": "github:mozillareality/aframe#deba2d4eedda664bb7d87bf4b3c9fcf25f5298e1",
+      "version": "github:mozillareality/aframe#2cd12e184bbf7e1ff7d2100d66064f50403405c1",
      "from": "github:mozillareality/aframe#hubs/master",
      "requires": {
        "custom-event-polyfill": "^1.0.6",
@ -26523,7 +26523,7 @@
      }
    },
    "lib-hubs": {
-      "version": "github:mozillareality/lib-hubs#592695f0fd098adbf7cc88d14391bd97a482f78a",
+      "version": "github:mozillareality/lib-hubs#f897132e88ba0c554424d911b2a56a47b6732c7c",
      "from": "github:mozillareality/lib-hubs#master"
    },
    "lie": {
@ -27689,7 +27689,7 @@
      "dev": true
    },
    "networked-aframe": {
-      "version": "github:mozillareality/networked-aframe#b6d1b7bd21889274098b16d6f1de9a510e8b6ae3",
+      "version": "github:mozillareality/networked-aframe#2c3c394e3f12a7d2cc68b193c0f7c94d709a46e8",
      "from": "github:mozillareality/networked-aframe#master",
      "requires": {
        "buffered-interpolation": "github:Infinitelee/buffered-interpolation#5bb18421ebf2bf11664645cdc7a15bd77ee2156b"
@ -36185,8 +36185,8 @@
      "dev": true
    },
    "three": {
-      "version": "github:mozillareality/three.js#b907b3c1cab8b416ef63b290aa603b540dd881b8",
-      "from": "github:mozillareality/three.js#hubs-patches-133"
+      "version": "github:mozillareality/three.js#d96f3cf69c7303db807cabaa2acba09d648e5e96",
+      "from": "github:mozillareality/three.js#hubs-patches-141"
    },
    "three-ammo": {
      "version": "github:infinitelee/three-ammo#db3ad1104b258d963ca66165f9fbed4013faa32a",
@ -36198,9 +36198,9 @@
      "integrity": "sha512-veRJRj0mY2rBj9yRZVg/E98wd6e7AzqzTq/+6ispY6m50gYuGitUNih2dRQzbkMcwRECLURvuudb9BFW3/swAw=="
    },
    "three-pathfinding": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/three-pathfinding/-/three-pathfinding-0.14.1.tgz",
-      "integrity": "sha512-lBXt+GLlgCz/ppakGDj6L/JJH2JmZ8ZFiFHqey4v47V8SrzhKRuXfrsHo6IPF1Z/MDki/ahIf7uquW+jy/3hAg=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/three-pathfinding/-/three-pathfinding-1.1.0.tgz",
+      "integrity": "sha512-GkQ5/HAVZZ/BT1kLvqf0KOmyDYrBtGk6krv0YX/0qU2sCv6a9epJZXNgczzZDQzX8+s676Uc4SKTo5djKpF3TA=="
    },
    "three-to-ammo": {
      "version": "github:infinitelee/three-to-ammo#9e68a3bbe500988f2dc0096f78c12dabbdaf5548",
--- a/package.json
+++ b/package.json
@ -132,10 +132,10 @@
    "screenfull": "^4.0.1",
    "sdp-transform": "^2.14.1",
    "semver": "^7.3.2",
-    "three": "github:mozillareality/three.js#hubs-patches-133",
+    "three": "github:mozillareality/three.js#hubs-patches-141",
    "three-ammo": "github:infinitelee/three-ammo",
    "three-mesh-bvh": "^0.3.7",
-    "three-pathfinding": "^0.14.1",
+    "three-pathfinding": "^1.1.0",
    "three-to-ammo": "github:infinitelee/three-to-ammo",
    "troika-three-text": "^0.45.0",
    "use-clipboard-copy": "^0.1.2",
--- a/src/components/animation.js
+++ b/src/components/animation.js
@ -665,9 +665,9 @@ function getPropertyType(el, property) {
 * Convert object to radians.
 */
 function toRadians(obj) {
-  obj.x = THREE.Math.degToRad(obj.x);
-  obj.y = THREE.Math.degToRad(obj.y);
-  obj.z = THREE.Math.degToRad(obj.z);
+  obj.x = THREE.MathUtils.degToRad(obj.x);
+  obj.y = THREE.MathUtils.degToRad(obj.y);
+  obj.z = THREE.MathUtils.degToRad(obj.z);
 }

 function addEventListeners(el, eventNames, handler) {
@ -703,7 +703,7 @@ function setRawProperty(el, path, value, type) {
  var targetValue;

  if (path.startsWith("object3D.rotation")) {
-    value = THREE.Math.degToRad(value);
+    value = THREE.MathUtils.degToRad(value);
  }

  // Walk.
--- a/src/components/audio-feedback.js
+++ b/src/components/audio-feedback.js
@ -28,7 +28,7 @@ const calculateVolume = (analyser, levels) => {
 function updateVolume(component) {
  const newRawVolume = calculateVolume(component.analyser, component.levels);

-  const newPerceivedVolume = Math.log(THREE.Math.mapLinear(newRawVolume, 0, 1, 1, Math.E));
+  const newPerceivedVolume = Math.log(THREE.MathUtils.mapLinear(newRawVolume, 0, 1, 1, Math.E));

  component.volume = newPerceivedVolume < MIN_VOLUME_THRESHOLD ? 0 : newPerceivedVolume;

@ -180,7 +180,7 @@ AFRAME.registerComponent("scale-audio-feedback", {
    if (!this.analyser) this.analyser = getAnalyser(this.el);

    this.el.object3D.scale.setScalar(
-      THREE.Math.mapLinear(this.analyser?.volume || 0, 0, 1, this.data.minScale, this.data.maxScale)
+      THREE.MathUtils.mapLinear(this.analyser?.volume || 0, 0, 1, this.data.minScale, this.data.maxScale)
    );
    this.el.object3D.matrixNeedsUpdate = true;
  }
@ -219,7 +219,7 @@ AFRAME.registerComponent("morph-audio-feedback", {
    if (!this.analyser) this.analyser = getAnalyser(this.el);

    const { minValue, maxValue } = this.data;
-    const morphValue = THREE.Math.mapLinear(
+    const morphValue = THREE.MathUtils.mapLinear(
      easeOutQuadratic(this.analyser ? this.analyser.volume : 0),
      0,
      1,
@ -267,7 +267,7 @@ const SPRITE_NAMES = {
 };

 export function micLevelForVolume(volume) {
-  return THREE.Math.clamp(Math.ceil(THREE.Math.mapLinear(volume - 0.05, 0, 1, 0, 7)), 0, 7);
+  return THREE.MathUtils.clamp(Math.ceil(THREE.MathUtils.mapLinear(volume - 0.05, 0, 1, 0, 7)), 0, 7);
 }

 AFRAME.registerComponent("mic-button", {
--- a/src/components/avatar-audio-source.js
+++ b/src/components/avatar-audio-source.js
@ -319,7 +319,7 @@ AFRAME.registerComponent("audio-target", {

    if (this.data.maxDelay > 0) {
      const delayNode = audio.context.createDelay(this.data.maxDelay);
-      delayNode.delayTime.value = THREE.Math.randFloat(this.data.minDelay, this.data.maxDelay);
+      delayNode.delayTime.value = THREE.MathUtils.randFloat(this.data.minDelay, this.data.maxDelay);
      audio.setFilters([delayNode]);
    }

--- a/src/components/avatar-volume-controls.js
+++ b/src/components/avatar-volume-controls.js
@ -71,14 +71,14 @@ AFRAME.registerComponent("avatar-volume-controls", {
  volumeUp() {
    let gainMultiplier = APP.gainMultipliers.get(this.audioEl);
    const step = calcGainStepUp(gainMultiplier);
-    gainMultiplier = THREE.Math.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER);
+    gainMultiplier = THREE.MathUtils.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER);
    this.updateGainMultiplier(gainMultiplier, true);
  },

  volumeDown() {
    let gainMultiplier = APP.gainMultipliers.get(this.audioEl);
    const step = -calcGainStepDown(gainMultiplier);
-    gainMultiplier = THREE.Math.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER);
+    gainMultiplier = THREE.MathUtils.clamp(gainMultiplier + step, 0, MAX_GAIN_MULTIPLIER);
    this.updateGainMultiplier(gainMultiplier, true);
  },

--- a/src/components/camera-tool.js
+++ b/src/components/camera-tool.js
@ -109,7 +109,7 @@ AFRAME.registerComponent("camera-tool", {
      format: THREE.RGBAFormat,
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter,
-      encoding: THREE.GammaEncoding,
+      encoding: THREE.sRGBEncoding,
      depth: false,
      stencil: false
    });
--- a/src/components/cursor-controller.js
+++ b/src/components/cursor-controller.js
@ -154,7 +154,7 @@ AFRAME.registerComponent("cursor-controller", {
      const cursorModDelta =
        userinput.get(left ? paths.actions.cursor.left.modDelta : paths.actions.cursor.right.modDelta) || 0;
      if (isGrabbing && !userinput.activeSets.includes(left ? sets.leftCursorHoldingUI : sets.rightCursorHoldingUI)) {
-        this.distance = THREE.Math.clamp(this.distance - cursorModDelta, minDistance, far * playerScale);
+        this.distance = THREE.MathUtils.clamp(this.distance - cursorModDelta, minDistance, far * playerScale);
      }
      cursor.object3D.position.copy(cursorPose.position).addScaledVector(cursorPose.direction, this.distance);
      // The cursor will always be oriented towards the player about its Y axis, so objects held by the cursor will rotate towards the player.
--- a/src/components/environment-map.js
+++ b/src/components/environment-map.js
@ -10,6 +10,6 @@ export async function createDefaultEnvironmentMap() {
  const texture = await new Promise((resolve, reject) =>
    new THREE.CubeTextureLoader().load(urls, resolve, undefined, reject)
  );
-  texture.format = THREE.RGBFormat;
+  texture.format = THREE.RGBAFormat;
  return texture;
 }
--- a/src/components/follow-in-fov.js
+++ b/src/components/follow-in-fov.js
@ -53,7 +53,7 @@ AFRAME.registerComponent("follow-in-fov", {
    // Compute position + rotation by projecting offset along a downward ray in target space,
    // and mask out Z rotation.
    this._applyMaskedTargetRotation(
-      -this.data.angle * THREE.Math.DEG2RAD,
+      -this.data.angle * THREE.MathUtils.DEG2RAD,
      target.rotation.y,
      0,
      this.snappedXFormWorld
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@ -210,7 +210,7 @@ const inflateEntities = function(indexToEntityMap, node, templates, isRoot, mode
  // the group. See `PropertyBinding.findNode`:
  // https://github.com/mrdoob/three.js/blob/dev/src/animation/PropertyBinding.js#L211
  el.object3D.uuid = node.uuid;
-  node.uuid = THREE.Math.generateUUID();
+  node.uuid = THREE.MathUtils.generateUUID();

  if (node.animations) {
    // Pass animations up to the group object so that when we can pass the group as
@ -595,7 +595,7 @@ class GLTFHubsTextureBasisExtension {
    console.warn(`The ${this.name} extension is deprecated, you should use KHR_texture_basisu instead.`);

    const extensionDef = textureDef.extensions[this.name];
-    const source = json.images[extensionDef.source];
+    const source = extensionDef.source;

    return parser.loadTextureImage(textureIndex, source, this.basisLoader);
  }
@ -618,7 +618,7 @@ class GLTFMozTextureRGBE {
    }

    const extensionDef = textureDef.extensions[this.name];
-    const source = json.images[extensionDef.source];
+    const source = extensionDef.source;
    return parser.loadTextureImage(textureIndex, source, this.loader).then(t => {
      // TODO pretty severe artifacting when using mipmaps, disable for now
      if (t.minFilter == THREE.NearestMipmapNearestFilter || t.minFilter == THREE.NearestMipmapLinearFilter) {
--- a/src/components/hud-controller.js
+++ b/src/components/hud-controller.js
@ -35,14 +35,14 @@ AFRAME.registerComponent("hud-controller", {

    const { offset, lookCutoff, animRange, yawCutoff } = this.data;

-    const pitch = head.rotation.x * THREE.Math.RAD2DEG;
-    const yawDif = deltaAngle(head.rotation.y, hud.rotation.y) * THREE.Math.RAD2DEG;
+    const pitch = head.rotation.x * THREE.MathUtils.RAD2DEG;
+    const yawDif = deltaAngle(head.rotation.y, hud.rotation.y) * THREE.MathUtils.RAD2DEG;

    // HUD is always visible until first hover, to increase discoverability.
    const forceHudVisible = !this.store.state.activity.hasHoveredInWorldHud;

    // animate the hud into place over animRange degrees as the user aproaches the lookCutoff angle
-    let t = 1 - THREE.Math.clamp(lookCutoff - pitch, 0, animRange) / animRange;
+    let t = 1 - THREE.MathUtils.clamp(lookCutoff - pitch, 0, animRange) / animRange;

    // HUD is locked down while showing tooltip or if forced.
    if (forceHudVisible) {
@ -80,7 +80,7 @@ AFRAME.registerComponent("hud-controller", {
      (!hudOutOfView || forceHudVisible) &&
      this.el.sceneEl.systems["hubs-systems"].cameraSystem.mode === CAMERA_MODE_FIRST_PERSON;
    hud.position.y = (this.isYLocked ? this.lockedHeadPositionY : head.position.y) + offset + (1 - t) * offset;
-    hud.rotation.x = (1 - t) * THREE.Math.DEG2RAD * 90;
+    hud.rotation.x = (1 - t) * THREE.MathUtils.DEG2RAD * 90;
    hud.matrixNeedsUpdate = true;
  },

--- a/src/components/ik-controller.js
+++ b/src/components/ik-controller.js
@ -79,7 +79,7 @@ AFRAME.registerComponent("ik-controller", {
    rightHand: { type: "string", default: "RightHand" },
    chest: { type: "string", default: "Spine" },
    rotationSpeed: { default: 8 },
-    maxLerpAngle: { default: 90 * THREE.Math.DEG2RAD },
+    maxLerpAngle: { default: 90 * THREE.MathUtils.DEG2RAD },
    alwaysUpdate: { type: "boolean", default: false }
  },

--- a/src/components/media-video.js
+++ b/src/components/media-video.js
@ -213,7 +213,7 @@ AFRAME.registerComponent("media-video", {

  changeVolumeBy(v) {
    let gainMultiplier = APP.gainMultipliers.get(this.el);
-    gainMultiplier = THREE.Math.clamp(gainMultiplier + v, 0, MAX_GAIN_MULTIPLIER);
+    gainMultiplier = THREE.MathUtils.clamp(gainMultiplier + v, 0, MAX_GAIN_MULTIPLIER);
    APP.gainMultipliers.set(this.el, gainMultiplier);
    this.updateVolumeLabel();
    const audio = APP.audios.get(this.el);
--- a/src/components/position-at-border.js
+++ b/src/components/position-at-border.js
@ -216,7 +216,7 @@ AFRAME.registerComponent("position-at-border", {
      }
      if (this.data.scale) {
        const distanceToCenter = centerToCamera.subVectors(cameraPosition, desiredCenterPoint).length();
-        desiredTargetScale.setScalar(THREE.Math.clamp(0.45 * distanceToCenter, MIN_SCALE, MAX_SCALE));
+        desiredTargetScale.setScalar(THREE.MathUtils.clamp(0.45 * distanceToCenter, MIN_SCALE, MAX_SCALE));
      } else {
        desiredTargetScale.setFromMatrixScale(this.target.matrixWorld);
      }
--- a/src/components/teleporter.js
+++ b/src/components/teleporter.js
@ -127,7 +127,7 @@ function parabolicCurve(p0, v0, t, out) {

 function isValidNormalsAngle(collisionNormal, referenceNormal, landingMaxAngle) {
  const angleNormals = referenceNormal.angleTo(collisionNormal);
-  return THREE.Math.RAD2DEG * angleNormals <= landingMaxAngle;
+  return THREE.MathUtils.RAD2DEG * angleNormals <= landingMaxAngle;
 }

 const checkLineIntersection = (function() {
@ -357,7 +357,7 @@ AFRAME.registerComponent("teleporter", {

    // Torus.
    this.torus = new THREE.Mesh(
-      new THREE.TorusBufferGeometry(data.hitCylinderRadius, 0.01, 16, 18, 360 * THREE.Math.DEG2RAD),
+      new THREE.TorusBufferGeometry(data.hitCylinderRadius, 0.01, 16, 18, 360 * THREE.MathUtils.DEG2RAD),
      new THREE.MeshBasicMaterial({
        color: data.hitCylinderColor,
        side: THREE.DoubleSide,
@ -366,7 +366,7 @@ AFRAME.registerComponent("teleporter", {
        depthTest: false
      })
    );
-    this.torus.rotation.x = 90 * THREE.Math.DEG2RAD;
+    this.torus.rotation.x = 90 * THREE.MathUtils.DEG2RAD;
    hitEntity.add(this.torus);

    // Cylinder.
@ -391,13 +391,13 @@ AFRAME.registerComponent("teleporter", {
    this.cylinder.position.y = data.hitCylinderHeight / 2;
    // UV's for THREE Geometries assume flipY
    if (!CYLINDER_TEXTURE.flipY) {
-      this.cylinder.rotation.z = 180 * THREE.Math.DEG2RAD;
+      this.cylinder.rotation.z = 180 * THREE.MathUtils.DEG2RAD;
    }
    hitEntity.add(this.cylinder);

    // create another torus for animating when the hit destination is ready to go
    this.outerTorus = new THREE.Mesh(
-      new THREE.TorusBufferGeometry(data.outerRadius, 0.01, 16, 18, 360 * THREE.Math.DEG2RAD),
+      new THREE.TorusBufferGeometry(data.outerRadius, 0.01, 16, 18, 360 * THREE.MathUtils.DEG2RAD),
      new THREE.MeshBasicMaterial({
        color: data.hitCylinderColor,
        side: THREE.DoubleSide,
@ -406,7 +406,7 @@ AFRAME.registerComponent("teleporter", {
        depthTest: false
      })
    );
-    this.outerTorus.rotation.x = 90 * THREE.Math.DEG2RAD;
+    this.outerTorus.rotation.x = 90 * THREE.MathUtils.DEG2RAD;
    hitEntity.add(this.outerTorus);

    return hitEntity;
--- a/src/components/tools/networked-drawing.js
+++ b/src/components/tools/networked-drawing.js
@ -203,8 +203,9 @@ AFRAME.registerComponent("networked-drawing", {
      }
    };

-    const glb = await new Promise(resolve => {
-      exporter.parse(mesh, resolve, {
+    // TODO: Proper error handling
+    const glb = await new Promise((resolve, reject) => {
+      exporter.parse(mesh, resolve, reject, {
        binary: true,
        includeCustomExtensions: true
      });
--- a/src/components/video-texture-target.js
+++ b/src/components/video-texture-target.js
@ -35,7 +35,7 @@ AFRAME.registerComponent("video-texture-source", {
      format: THREE.RGBAFormat,
      minFilter: THREE.LinearFilter,
      magFilter: THREE.NearestFilter,
-      encoding: THREE.GammaEncoding,
+      encoding: THREE.sRGBEncoding,
      depth: false,
      stencil: false
    });
--- a/src/react-components/avatar-preview.js
+++ b/src/react-components/avatar-preview.js
@ -53,12 +53,12 @@ const createImageBitmapFromURL = url =>
    .then(r => r.blob())
    .then(createImageBitmap);

-const ORBIT_ANGLE = new THREE.Euler(-30 * THREE.Math.DEG2RAD, 30 * THREE.Math.DEG2RAD, 0);
+const ORBIT_ANGLE = new THREE.Euler(-30 * THREE.MathUtils.DEG2RAD, 30 * THREE.MathUtils.DEG2RAD, 0);
 const DEFAULT_MARGIN = 1;

 function fitBoxInFrustum(camera, box, center, margin = DEFAULT_MARGIN) {
  const halfYExtents = Math.max(box.max.y - center.y, center.y - box.min.y);
-  const halfVertFOV = THREE.Math.degToRad(camera.fov / 2);
+  const halfVertFOV = THREE.MathUtils.degToRad(camera.fov / 2);
  camera.position.set(0, 0, (halfYExtents / Math.tan(halfVertFOV) + box.max.z) * margin);
  camera.position.applyEuler(ORBIT_ANGLE);
  camera.position.add(center);
--- a/src/react-components/misc/useVolumeMeter.js
+++ b/src/react-components/misc/useVolumeMeter.js
@ -18,7 +18,7 @@ const calculateVolume = (analyser, levels) => {
 function updateVolume(analyser, meter) {
  const newRawVolume = calculateVolume(analyser, meter.levels);

-  const newPerceivedVolume = Math.log(THREE.Math.mapLinear(newRawVolume, 0, 1, 1, Math.E));
+  const newPerceivedVolume = Math.log(THREE.MathUtils.mapLinear(newRawVolume, 0, 1, 1, Math.E));

  meter.volume = newPerceivedVolume < MIN_VOLUME_THRESHOLD ? 0 : newPerceivedVolume;

--- a/src/systems/character-controller-system.js
+++ b/src/systems/character-controller-system.js
@ -202,7 +202,7 @@ export class CharacterControllerSystem {
      const animationIsOver =
        this.waypointTravelTime === 0 || t >= this.waypointTravelStartTime + this.waypointTravelTime;
      if (this.activeWaypoint && !animationIsOver) {
-        const progress = THREE.Math.clamp((t - this.waypointTravelStartTime) / this.waypointTravelTime, 0, 1);
+        const progress = THREE.MathUtils.clamp((t - this.waypointTravelStartTime) / this.waypointTravelTime, 0, 1);
        interpolateAffine(
          startTransform,
          this.activeWaypoint.transform,
--- a/src/systems/environment-system.js
+++ b/src/systems/environment-system.js
@ -1,4 +1,4 @@
-import { GUI } from "three/examples/jsm/libs/dat.gui.module.js";
+import { GUI } from "three/examples/jsm/libs/lil-gui.module.min";
 import qsTruthy from "../utils/qs_truthy";

 import { LUTCubeLoader } from "three/examples/jsm/loaders/LUTCubeLoader";
@ -17,11 +17,8 @@ const toneMappingOptions = {
 const outputEncodingOptions = {
  LinearEncoding: "LinearEncoding",
  sRGBEncoding: "sRGBEncoding",
-  GammaEncoding: "GammaEncoding",
  GBEEncoding: "GBEEncoding",
-  LogLuvEncoding: "LogLuvEncoding",
  GBM7Encoding: "GBM7Encoding",
-  RGBM16Encoding: "RGBM16Encoding",
  GBDEncoding: "GBDEncoding",
  BasicDepthPacking: "BasicDepthPacking",
  GBADepthPacking: "GBADepthPackig"
--- a/src/systems/haptic-feedback-system.js
+++ b/src/systems/haptic-feedback-system.js
@ -40,7 +40,7 @@ function determineStretchStrength(stretchSystem) {
    return 0;
  }

-  return THREE.Math.clamp(
+  return THREE.MathUtils.clamp(
    STRENGTH.STRETCH_BASE +
      STRENGTH.STRETCH_DISTANCE *
        Math.abs(
--- a/src/systems/menu-animation-system.js
+++ b/src/systems/menu-animation-system.js
@ -50,17 +50,17 @@ export class MenuAnimationSystem {
        menuParentScale.setFromMatrixScale(datum.menuEl.object3D.parent.matrixWorld);
        if (isMenuOpening) {
          const scale = datum.chooseScale
-            ? THREE.Math.clamp(0.45 * distanceToMenu, 0.05, 4)
+            ? THREE.MathUtils.clamp(0.45 * distanceToMenu, 0.05, 4)
            : menuScale.setFromMatrixScale(datum.menuEl.object3D.matrixWorld).x;
          datum.endingScale = scale / menuParentScale.x;
          datum.menuOpenTime = t;
          datum.startScaleAtMenuOpenTime = datum.endingScale * 0.8;
        }
        if (isMenuVisible) {
-          const currentScale = THREE.Math.lerp(
+          const currentScale = THREE.MathUtils.lerp(
            datum.startScaleAtMenuOpenTime,
            datum.endingScale,
-            elasticOut(THREE.Math.clamp((t - datum.menuOpenTime) / MENU_ANIMATION_DURATION_MS, 0, 1))
+            elasticOut(THREE.MathUtils.clamp((t - datum.menuOpenTime) / MENU_ANIMATION_DURATION_MS, 0, 1))
          );
          if (datum.menuEl.object3D.scale.x !== currentScale) {
            datum.menuEl.object3D.scale.setScalar(currentScale);
--- a/src/systems/userinput/devices/vive-controller.js
+++ b/src/systems/userinput/devices/vive-controller.js
@ -5,7 +5,7 @@ import { copySittingToStandingTransform } from "./copy-sitting-to-standing-trans
 const ONES = new THREE.Vector3(1, 1, 1);
 const HAND_OFFSET = new THREE.Matrix4().compose(
  new THREE.Vector3(0, 0, 0.13),
-  new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.Math.DEG2RAD, 0, 0)),
+  new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.MathUtils.DEG2RAD, 0, 0)),
  new THREE.Vector3(1, 1, 1)
 );
 const RAY_ROTATION = new THREE.Quaternion();
--- a/src/systems/userinput/devices/windows-mixed-reality-controller.js
+++ b/src/systems/userinput/devices/windows-mixed-reality-controller.js
@ -4,7 +4,7 @@ import { copySittingToStandingTransform } from "./copy-sitting-to-standing-trans
 const ONES = new THREE.Vector3(1, 1, 1);
 const HAND_OFFSET = new THREE.Matrix4().compose(
  new THREE.Vector3(0, -0.017, 0.13),
-  new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.Math.DEG2RAD, 0, 0)),
+  new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.MathUtils.DEG2RAD, 0, 0)),
  new THREE.Vector3(1, 1, 1)
 );
 const m = new THREE.Matrix4();
--- a/src/utils/dpad.js
+++ b/src/utils/dpad.js
@ -1,5 +1,5 @@
 export function angleTo4Direction(angle) {
-  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  angle = (angle * THREE.MathUtils.RAD2DEG + 180 + 45) % 360;
  if (angle > 0 && angle < 90) {
    return "north";
  } else if (angle >= 90 && angle < 180) {
@ -12,7 +12,7 @@ export function angleTo4Direction(angle) {
 }

 export function angleTo8Direction(angle) {
-  angle = (angle * THREE.Math.RAD2DEG + 180 + 45) % 360;
+  angle = (angle * THREE.MathUtils.RAD2DEG + 180 + 45) % 360;
  let direction = "";
  if ((angle >= 0 && angle < 120) || angle >= 330) {
    direction += "north";
--- a/src/utils/three-utils.js
+++ b/src/utils/three-utils.js
@ -37,14 +37,8 @@ export function disposeNode(node) {
  }

  if (node.material) {
-    let materialArray;
-    if (node.material instanceof THREE.MeshFaceMaterial || node.material instanceof THREE.MultiMaterial) {
-      materialArray = node.material.materials;
-    } else if (node.material instanceof Array) {
-      materialArray = node.material;
-    }
-    if (materialArray) {
-      materialArray.forEach(disposeMaterial);
+    if (Array.isArray(node.material)) {
+      node.material.forEach(disposeMaterial);
    } else {
      disposeMaterial(node.material);
    }
@ -310,7 +304,7 @@ export const calculateViewingDistance = (function() {
  return function calculateViewingDistance(fov, aspect, box, center, vrMode) {
    const halfYExtents = Math.max(Math.abs(box.max.y - center.y), Math.abs(center.y - box.min.y));
    const halfXExtents = Math.max(Math.abs(box.max.x - center.x), Math.abs(center.x - box.min.x));
-    const halfVertFOV = THREE.Math.degToRad(fov / 2);
+    const halfVertFOV = THREE.MathUtils.degToRad(fov / 2);
    const halfHorFOV = Math.atan(Math.tan(halfVertFOV) * aspect) * (vrMode ? 0.5 : 1);
    const margin = 1.05;
    const length1 = Math.abs((halfYExtents * margin) / Math.tan(halfVertFOV));
--- a/src/vendor/Water.js
+++ b/src/vendor/Water.js
@ -51,13 +51,13 @@ THREE.Water = function(geometry, options) {
  const parameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
-    format: THREE.RGBFormat,
+    format: THREE.RGBAFormat,
    stencilBuffer: false
  };

  const renderTarget = new THREE.WebGLRenderTarget(textureWidth, textureHeight, parameters);

-  if (!THREE.Math.isPowerOfTwo(textureWidth) || !THREE.Math.isPowerOfTwo(textureHeight)) {
+  if (!THREE.MathUtils.isPowerOfTwo(textureWidth) || !THREE.MathUtils.isPowerOfTwo(textureHeight)) {
    renderTarget.texture.generateMipmaps = false;
  }

--- a/webpack.config.js
+++ b/webpack.config.js
@ -447,6 +447,19 @@ module.exports = async (env, argv) => {
          exclude: [path.resolve(__dirname, "node_modules")],
          loader: "babel-loader"
        },
+        {
+          test: [path.resolve(
+            __dirname,
+            "node_modules",
+            "three",
+            "examples",
+            "jsm",
+            "exporters",
+            "GLTFExporter.js"
+	  )],
+          loader: "babel-loader",
+          options: legacyBabelConfig
+        },
        {
          test: /\.(scss|css)$/,
          use: [