Fix exporter code for three r141

package.json

@@ -27,6 +27,6 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "simplebar-react": "^2.3.0",
-    "three": "^0.125.2"
+    "three": "^0.141.0"
   }
 }

src/create-texture-atlas.js

@@ -84,7 +84,7 @@ export const createTextureAtlas = (function () {
         context.globalCompositeOperation = image ? "multiply" : "source-over";
 
         const colorClone = mesh.material.color.clone();
-        colorClone.convertLinearToGamma();
+        colorClone.convertLinearToSRGB();
 
         context.fillStyle = `#${colorClone.getHexString()}`;
         context.fillRect(min.x * ATLAS_SIZE_PX, min.y * ATLAS_SIZE_PX, tileSize, tileSize);

src/export.js

@@ -53,8 +53,16 @@ export function combineHubsComponents(a, b) {
 export const exportGLTF = (function () {
   const exporter = new GLTFExporter();
   return function exportGLTF(object3D, { binary, animations }) {
-    return new Promise((resolve) => {
-      exporter.parse(object3D, (gltf) => resolve({ gltf }), { binary, animations });
+    return new Promise((resolve, reject) => {
+      exporter.parse(
+        object3D,
+        (gltf) => resolve({ gltf }),
+        (error) => {
+          console.error(error);
+          reject("Error exporting the avatar");
+        },
+        { binary, animations }
+      );
     });
   };
 })();

src/game.js

@@ -57,9 +57,9 @@ const state = {
 };
 window.gameState = state;
 
-window.onresize = () => {
+window.addEventListener("resize", () => {
   state.shouldResize = true;
-};
+});
 document.addEventListener(constants.reactIsLoaded, () => {
   state.reactIsLoaded = true;
 });
@@ -126,8 +126,9 @@ function init() {
 
   // TODO: Square this with react
   const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("scene"), antialias: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
   renderer.physicallyCorrectLights = true;
-  renderer.gammaOutput = true;
+  renderer.outputEncoding = THREE.sRGBEncoding;
   state.renderer = renderer;
 
   state.clock = new THREE.Clock();

src/merge-geometry.js

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { BufferGeometryUtils } from "three/examples/jsm/utils/BufferGeometryUtils";
+import { mergeBufferAttributes } from "three/examples/jsm/utils/BufferGeometryUtils";
 import constants from "./constants";
 import { GLTFCubicSplineInterpolant } from "./gltf-cubic-spline-interpolant";
 
@@ -39,7 +39,7 @@ function mergeSourceAttributes({ sourceAttributes }) {
 
   const destAttributes = {};
   Array.from(propertyNames.keys()).map((name) => {
-    destAttributes[name] = BufferGeometryUtils.mergeBufferAttributes(
+    destAttributes[name] = mergeBufferAttributes(
       allSourceAttributes.map((sourceAttributes) => sourceAttributes[name]).flat()
     );
   });
@@ -103,7 +103,7 @@ function mergeSourceMorphAttributes({
   propertyNames.forEach((propName) => {
     merged[propName] = [];
     Object.entries(destMorphTargetDictionary).forEach(([morphName, destMorphIndex]) => {
-      merged[propName][destMorphIndex] = BufferGeometryUtils.mergeBufferAttributes(unmerged[propName][destMorphIndex]);
+      merged[propName][destMorphIndex] = mergeBufferAttributes(unmerged[propName][destMorphIndex]);
     });
   });
 

src/mesh-combination.js

@@ -73,6 +73,21 @@ export async function combine({ avatar }) {
       delete geometry.attributes[`morphTarget${i}`];
       delete geometry.attributes[`morphNormal${i}`];
     }
+    // Computing tangents that was done in GLTFLoader in threejs 0.125.2 was removed in threejs r126 (https://github.com/mrdoob/three.js/pull/21186)
+    // The mergeSourceAttributes function will crash because it can't find the tangent attribute on some geometry.
+    // So putting back here the code that was executed in GLTFLoader 0.125.2:
+    const material = mesh.material;
+    if (
+      material.isMeshStandardMaterial === true &&
+      material.side === THREE.DoubleSide &&
+      geometry.getIndex() !== null &&
+      geometry.hasAttribute("position") === true &&
+      geometry.hasAttribute("normal") === true &&
+      geometry.hasAttribute("uv") === true &&
+      geometry.hasAttribute("tangent") === false
+    ) {
+      geometry.computeTangents();
+    }
   });
 
   const { source, dest } = mergeGeometry({ meshes });

src/react-components/AvatarEditorContainer.js

@@ -33,10 +33,13 @@ export function AvatarEditorContainer() {
   });
 
   // TODO: Save the wave to a static image, or actually do some interesting animation with it.
-  useEffect(async () => {
-    if (canvasUrl === null) {
-      setCanvasUrl(await generateWave());
+  useEffect(() => {
+    async function init() {
+      if (canvasUrl === null) {
+        setCanvasUrl(await generateWave());
+      }
     }
+    init();
   });
 
   function updateAvatarConfig(newConfig) {

src/react-components/ToolbarContainer.js

@@ -35,8 +35,8 @@ export function ToolbarContainer({ onGLBUploaded, randomizeConfig }) {
         </button>
       </div>
       <div className="toolbarNotice">
-        <span>The 3D models used in this app are ©2020-2022 by individual <a href="https://www.mozilla.org" target="_blank" noreferrer>mozilla.org</a> contributors.
-          Content available under a <a href="https://www.mozilla.org/en-US/foundation/licensing/website-content/" target="_blank" noreferrer>Creative Commons license</a>.</span>
+        <span>The 3D models used in this app are ©2020-2022 by individual <a href="https://www.mozilla.org" target="_blank" rel="noreferrer">mozilla.org</a> contributors.
+          Content available under a <a href="https://www.mozilla.org/en-US/foundation/licensing/website-content/" target="_blank" rel="noreferrer">Creative Commons license</a>.</span>
       </div>
     </Toolbar>
   );