Add custom event when textures are loaded

docs/_next/static/Lom5Bj4dutsiM6QHBT40j/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,"static/chunks/e21e5bbe-b28e0079b469d4e8.js","static/chunks/ebc70433-4eccd1cb3af29a3e.js","static/chunks/6eb5140f-31a2b2da7903b885.js","static/chunks/5d416436-3c60fd013e24a5af.js","static/chunks/85d7bc83-1ca530d7d3f44153.js","static/chunks/3a17f596-9aeae038dfa51955.js","static/chunks/f580fadb-2911e2fbf64aae5a.js","static/chunks/515-13ff0773d41722ae.js","static/chunks/pages/index-3fa4416cd8b0abc2.js"],"/_error":["static/chunks/pages/_error-54b9fcf45cb5bc62.js"],"/gallery":[s,"static/chunks/737a5600-aea383aaa2061cc6.js","static/chunks/918-3c6747f76df39072.js","static/css/922e89893536f2f9.css","static/chunks/pages/gallery-af1406fdc1af13f5.js"],sortedPages:["/","/_app","/_error","/gallery"]}}("static/chunks/cb355538-e538db8a1761f402.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST=function(s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,"static/chunks/e21e5bbe-b28e0079b469d4e8.js","static/chunks/ebc70433-4eccd1cb3af29a3e.js","static/chunks/6eb5140f-31a2b2da7903b885.js","static/chunks/5d416436-3c60fd013e24a5af.js","static/chunks/85d7bc83-1ca530d7d3f44153.js","static/chunks/3a17f596-9aeae038dfa51955.js","static/chunks/f580fadb-2911e2fbf64aae5a.js","static/chunks/515-13ff0773d41722ae.js","static/chunks/pages/index-d4d443df49e6b529.js"],"/_error":["static/chunks/pages/_error-54b9fcf45cb5bc62.js"],"/gallery":[s,"static/chunks/737a5600-aea383aaa2061cc6.js","static/chunks/918-3c6747f76df39072.js","static/css/922e89893536f2f9.css","static/chunks/pages/gallery-af1406fdc1af13f5.js"],sortedPages:["/","/_app","/_error","/gallery"]}}("static/chunks/cb355538-e538db8a1761f402.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

src/Material.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useMemo, useRef } from "react";
 import type { ModelViewerElement } from "@google/model-viewer";
 import useSettings from "./useSettings";
 import useSkin from "./useSkin";
@@ -45,12 +45,14 @@ function useTexture({
   textureType,
   imageUrl,
   frameRef,
+  onReady,
 }: {
   material: ModelMaterial;
   materialDef?: MaterialDefinition;
   textureType: "baseColorTexture" | "metallicRoughnessTexture";
   imageUrl?: string[];
   frameRef: MutableRefObject<FrameInfo>;
+  onReady?: () => void;
 }) {
   const { modelViewer } = useModelViewer();
   const { basePath } = useSettings();
@@ -63,10 +65,16 @@ function useTexture({
     const updateTexture = async () => {
       if (!materialDef || materialDef.hidden) {
         if (textureType === "metallicRoughnessTexture") {
+          if (onReady) {
+            onReady();
+          }
           return;
         } else {
           material.setAlphaMode("BLEND");
           material.pbrMetallicRoughness.setBaseColorFactor([0, 0, 0, 0]);
+          if (onReady) {
+            onReady();
+          }
         }
       } else {
         const {
@@ -138,6 +146,9 @@ function useTexture({
           };
 
           frame(0);
+          if (onReady) {
+            onReady();
+          }
         }
       }
     };
@@ -159,26 +170,47 @@ function useTexture({
     imageUrl,
     frameRef,
     slowModeEnabled,
+    onReady,
   ]);
 }
 
 interface MaterialProps {
   material: ModelMaterial;
   materialDef?: MaterialDefinition;
+  onReady?: (imageUrls: Array<string[] | undefined>) => void;
 }
 
-export default function Material({ material, materialDef }: MaterialProps) {
+export default function Material({
+  material,
+  materialDef,
+  onReady,
+}: MaterialProps) {
   const { getSkinImages } = useSkin();
   const { colorImageUrl, metallicImageUrl } =
     getSkinImages(materialDef?.file ?? material.name) ?? {};
   const frameRef = useRef<FrameInfo>({ frameIndex: 0, frameProgress: 0 });
 
+  const onTextureReady = useMemo(() => {
+    let i = 0;
+    return () => {
+      i += 1;
+      if (i === 2) {
+        const event = new Event("material-ready");
+        window.dispatchEvent(event);
+        if (onReady) {
+          onReady([colorImageUrl, metallicImageUrl]);
+        }
+      }
+    };
+  }, [colorImageUrl, metallicImageUrl, onReady]);
+
   useTexture({
     material,
     materialDef,
     textureType: "baseColorTexture",
     imageUrl: colorImageUrl,
     frameRef,
+    onReady: onTextureReady,
   });
   useTexture({
     material,
@@ -186,6 +218,7 @@ export default function Material({ material, materialDef }: MaterialProps) {
     textureType: "metallicRoughnessTexture",
     imageUrl: metallicImageUrl,
     frameRef,
+    onReady: onTextureReady,
   });
 
   return null;