diff --git a/package-lock.json b/package-lock.json
index d3c7828b1..a4dcc3472 100644
--- 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",
diff --git a/package.json b/package.json
index 6e645406c..be494e349 100644
--- 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",
diff --git a/src/components/animation.js b/src/components/animation.js
index e73628a39..8a9942269 100644
--- 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.
diff --git a/src/components/audio-feedback.js b/src/components/audio-feedback.js
index 005564fb1..dc0199d2e 100644
--- 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", {
diff --git a/src/components/avatar-audio-source.js b/src/components/avatar-audio-source.js
index 0199288bd..0c17639e3 100644
--- 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]);
     }
 
diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js
index 8c9098169..15a3e70d3 100644
--- 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);
   },
 
diff --git a/src/components/camera-tool.js b/src/components/camera-tool.js
index 0d61ee573..b4ef23755 100644
--- 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
     });
diff --git a/src/components/cursor-controller.js b/src/components/cursor-controller.js
index c280cac36..ae8896b05 100644
--- 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.
diff --git a/src/components/environment-map.js b/src/components/environment-map.js
index 6d14271d0..3096d34de 100644
--- 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;
 }
diff --git a/src/components/follow-in-fov.js b/src/components/follow-in-fov.js
index 18b0c5d4f..94b2b9d16 100644
--- 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
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index 0956d2166..38cd42ef5 100644
--- 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) {
diff --git a/src/components/hud-controller.js b/src/components/hud-controller.js
index f47ff2008..a45c0e0d7 100644
--- 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;
   },
 
diff --git a/src/components/ik-controller.js b/src/components/ik-controller.js
index c2549a46d..d92d13f76 100644
--- 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 }
   },
 
diff --git a/src/components/media-video.js b/src/components/media-video.js
index e3c70ac33..049a85b66 100644
--- 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);
diff --git a/src/components/position-at-border.js b/src/components/position-at-border.js
index f243467a6..4c263744f 100644
--- 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);
       }
diff --git a/src/components/teleporter.js b/src/components/teleporter.js
index 6fce04fa7..f57b051af 100644
--- 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;
diff --git a/src/components/tools/networked-drawing.js b/src/components/tools/networked-drawing.js
index a7cd83414..247f2af2f 100644
--- 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
       });
diff --git a/src/components/video-texture-target.js b/src/components/video-texture-target.js
index 13f11cddc..4b2df9b53 100644
--- 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
     });
diff --git a/src/react-components/avatar-preview.js b/src/react-components/avatar-preview.js
index 62acf8df1..79ed45cb8 100644
--- 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);
diff --git a/src/react-components/misc/useVolumeMeter.js b/src/react-components/misc/useVolumeMeter.js
index b38a24c68..cd7483768 100644
--- 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;
 
diff --git a/src/systems/character-controller-system.js b/src/systems/character-controller-system.js
index ea3feb8d6..e7ab9c63d 100644
--- 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,
diff --git a/src/systems/environment-system.js b/src/systems/environment-system.js
index 0f8164cbf..0b44af044 100644
--- 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"
diff --git a/src/systems/haptic-feedback-system.js b/src/systems/haptic-feedback-system.js
index c86b1ba8b..4d2c5eb80 100644
--- 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(
diff --git a/src/systems/menu-animation-system.js b/src/systems/menu-animation-system.js
index 7cf3f37b9..344fe61ef 100644
--- 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);
diff --git a/src/systems/userinput/devices/vive-controller.js b/src/systems/userinput/devices/vive-controller.js
index 63513b654..903a3a519 100644
--- 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();
diff --git a/src/systems/userinput/devices/windows-mixed-reality-controller.js b/src/systems/userinput/devices/windows-mixed-reality-controller.js
index 678061d67..f38c0cbc2 100644
--- 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();
diff --git a/src/utils/dpad.js b/src/utils/dpad.js
index c603e75ad..da2aa5555 100644
--- 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";
diff --git a/src/utils/three-utils.js b/src/utils/three-utils.js
index c339f4a33..48ff0e92b 100644
--- 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));
diff --git a/src/vendor/Water.js b/src/vendor/Water.js
index b173118b6..c923b131a 100644
--- 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;
   }
 
diff --git a/webpack.config.js b/webpack.config.js
index 407581756..b4478ff15 100644
--- 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: [