r170 (#4928)

* updated deps - need to fix TS

* model-viewer compiles

* everything builds, removed cruft

* fixed variant exporter plugin

Author: elalish

package-lock.json

@@ -73,7 +73,7 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "postprocessing": "^6.35.3"
+    "postprocessing": "^6.36.4"
   },
   "peerDependencies": {
     "@google/model-viewer": "^4.0.0"
@@ -85,7 +85,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@types/mocha": "^10.0.9",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.164.0",
+    "@types/three": "^0.169.0",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
@@ -99,7 +99,7 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-polyfill": "^3.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "three": "^0.169.0",
+    "three": "^0.170.0",
     "typescript": "5.6.3"
   },
   "publishConfig": {

packages/model-viewer-effects/README.md

@@ -15,7 +15,7 @@
 
 import {ModelViewerElement} from '@google/model-viewer';
 import {Renderer} from '@google/model-viewer/lib/three-components/Renderer.js';
-import {EventDispatcher, HSL} from 'three';
+import {HSL} from 'three';
 
 import {getOwnPropertySymbolValue} from '../utilities.js';
 
@@ -168,32 +168,26 @@ export const createModelViewerElement =
       return element;
     };
 
-/**
- * Three.js EventDispatcher and DOM EventTarget use different event patterns,
- * so AnyEvent covers the shape of both event types.
- */
-export type AnyEvent = Event|CustomEvent<any>|{[index: string]: string};
-
 export type PredicateFunction<T = void> = (value: T) => boolean;
 
 /**
  * @param {EventTarget|EventDispatcher} target
  * @param {string} eventName
  * @param {?Function} predicate
  */
-export const waitForEvent = <T extends AnyEvent = Event>(
-    target: EventTarget|EventDispatcher,
-    eventName: string,
-    predicate: PredicateFunction<T>|null = null): Promise<T> =>
-    new Promise((resolve) => {
-      function handler(event: AnyEvent) {
-        if (!predicate || predicate(event as T)) {
-          resolve(event as T);
-          target.removeEventListener(eventName, handler as any);
-        }
-      }
-      target.addEventListener(eventName, handler as any);
-    });
+export const waitForEvent =
+    <T>(target: any,
+        eventName: string,
+        predicate: PredicateFunction<T>|null = null): Promise<T> =>
+        new Promise((resolve) => {
+          function handler(event: T) {
+            if (!predicate || predicate(event)) {
+              resolve(event);
+              target.removeEventListener(eventName, handler);
+            }
+          }
+          target.addEventListener(eventName, handler);
+        });
 
 export interface TypedArray<T = unknown> {
   readonly BYTES_PER_ELEMENT: number;

packages/model-viewer-effects/package.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2017",
     "module": "es2015",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "lib": [
       "es2017",
       "dom"

packages/model-viewer-effects/src/test/utilities.ts

@@ -87,15 +87,15 @@
     "@monogrid/gainmap-js": "^3.0.1"
   },
   "peerDependencies": {
-    "three": "^0.169.0"
+    "three": "^0.170.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@types/mocha": "^10.0.9",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.164.0",
+    "@types/three": "^0.169.0",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
@@ -109,7 +109,7 @@
     "rollup-plugin-polyfill": "^3.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "typescript": "5.6.3",
-    "three": "^0.169.0"
+    "three": "^0.170.0"
   },
   "publishConfig": {
     "access": "public"

packages/model-viewer-effects/tsconfig.json

@@ -14,6 +14,7 @@
  */
 
 import {EventDispatcher, Texture, WebGLRenderer} from 'three';
+import {MeshoptDecoder} from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js';
 import {GLTF, GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
 import {KTX2Loader} from 'three/examples/jsm/loaders/KTX2Loader.js';
@@ -69,15 +70,6 @@ const ktx2Loader = new KTX2Loader();
 let meshoptDecoderLocation: string;
 let meshoptDecoder: Promise<typeof MeshoptDecoder>|undefined;
 
-interface MeshoptDecoder {
-  ready: Promise<void>;
-  supported: boolean;
-}
-
-declare global {
-  const MeshoptDecoder: MeshoptDecoder;
-}
-
 export const $loader = Symbol('loader');
 export const $evictionPolicy = Symbol('evictionPolicy');
 const $GLTFInstance = Symbol('GLTFInstance');

packages/model-viewer/package.json

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {ACESFilmicToneMapping, AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, Box3, Camera, Euler, Event as ThreeEvent, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, ToneMapping, Triangle, Vector2, Vector3, WebGLRenderer, XRTargetRaySpace} from 'three';
+import {ACESFilmicToneMapping, AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, AnimationMixerEventMap, Box3, Camera, Euler, Event as ThreeEvent, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, ToneMapping, Triangle, Vector2, Vector3, WebGLRenderer, XRTargetRaySpace} from 'three';
 import {CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import {reduceVertices} from 'three/examples/jsm/utils/SceneUtils.js';
 
@@ -783,7 +783,8 @@ export class ModelScene extends Scene {
     this.queueShadowRender();
   }
 
-  subscribeMixerEvent(event: string, callback: (...args: any[]) => void) {
+  subscribeMixerEvent(
+      event: keyof AnimationMixerEventMap, callback: (...args: any[]) => void) {
     this.mixer.addEventListener(event, callback);
   }
 

packages/model-viewer/src/three-components/CachingGLTFLoader.ts

@@ -26,6 +26,7 @@
  */
 
 import {Material, Mesh, Object3D} from 'three';
+import {GLTFExporterPlugin} from 'three/examples/jsm/Addons.js';
 
 import {VariantData} from '../../features/scene-graph/model.js';
 
@@ -61,7 +62,8 @@ const compatibleMaterial = (material: Material|null) => {
   return material && material.isMaterial && !Array.isArray(material);
 };
 
-export default class GLTFExporterMaterialsVariantsExtension {
+export default class GLTFExporterMaterialsVariantsExtension implements
+    GLTFExporterPlugin {
   writer: any;  // @TODO: Replace with GLTFWriter when GLTFExporter plugin TS
                 // declaration is ready
   name: string;
@@ -73,32 +75,38 @@ export default class GLTFExporterMaterialsVariantsExtension {
     this.variantNames = [];
   }
 
-  beforeParse(objects: Object3D[]) {
+  beforeParse(objects: Object3D|Object3D[]) {
     // Find all variant names and store them to the table
     const variantNameSet = new Set<string>();
-    for (const object of objects) {
-      object.traverse(o => {
-        if (!compatibleObject(o)) {
-          return;
-        }
-        const variantMaterials =
-            o.userData.variantMaterials as Map<number, UserDataVariantMapping>;
-        const variantDataMap =
-            o.userData.variantData as Map<string, VariantData>;
-        for (const [variantName, variantData] of variantDataMap) {
-          const variantMaterial = variantMaterials.get(variantData.index);
-          // Ignore unloaded variant materials
-          if (variantMaterial && compatibleMaterial(variantMaterial.material)) {
-            variantNameSet.add(variantName);
-          }
+
+    const addVariantNames = (o: Object3D) => {
+      if (!compatibleObject(o)) {
+        return;
+      }
+      const variantMaterials =
+          o.userData.variantMaterials as Map<number, UserDataVariantMapping>;
+      const variantDataMap = o.userData.variantData as Map<string, VariantData>;
+      for (const [variantName, variantData] of variantDataMap) {
+        const variantMaterial = variantMaterials.get(variantData.index);
+        // Ignore unloaded variant materials
+        if (variantMaterial && compatibleMaterial(variantMaterial.material)) {
+          variantNameSet.add(variantName);
         }
-      });
+      }
+    };
+
+    if (Array.isArray(objects)) {
+      for (const object of objects) {
+        object.traverse(addVariantNames);
+      }
+    } else {
+      objects.traverse(addVariantNames);
     }
     // We may want to sort?
     variantNameSet.forEach(name => this.variantNames.push(name));
   }
 
-  writeMesh(mesh: Mesh, meshDef: any) {
+  async writeMesh(mesh: Mesh, meshDef: any) {
     if (!compatibleObject(mesh)) {
       return;
     }
@@ -126,7 +134,7 @@ export default class GLTFExporterMaterialsVariantsExtension {
       }
 
       const materialIndex =
-          this.writer.processMaterial(variantInstance.material);
+          await this.writer.processMaterialAsync(variantInstance.material);
       if (!mappingTable.has(materialIndex)) {
         mappingTable.set(
             materialIndex, {material: materialIndex, variants: []});
@@ -146,7 +154,7 @@ export default class GLTFExporterMaterialsVariantsExtension {
 
     const originalMaterialIndex =
         compatibleMaterial(userData.originalMaterial) ?
-        this.writer.processMaterial(userData.originalMaterial) :
+        await this.writer.processMaterialAsync(userData.originalMaterial) :
         -1;
 
     for (const primitiveDef of meshDef.primitives) {

packages/model-viewer/src/three-components/ModelScene.ts

@@ -13,8 +13,6 @@
  * limitations under the License.
  */
 
-import {EventDispatcher} from 'three';
-
 import {HAS_WEBXR_DEVICE_API, HAS_WEBXR_HIT_TEST_API, IS_WEBXR_AR_CANDIDATE} from './constants.js';
 
 export type Constructor<T = object, U = object> = {
@@ -143,13 +141,6 @@ export const isDebugMode = (() => {
        self.location.search.match(debugQueryParameter));
 })();
 
-
-/**
- * Three.js EventDispatcher and DOM EventTarget use different event patterns,
- * so AnyEvent covers the shape of both event types.
- */
-export type AnyEvent = Event|CustomEvent<any>|{[index: string]: string};
-
 export type PredicateFunction<T = void> = (value: T) => boolean;
 
 export const timePasses = (ms: number = 0): Promise<void> =>
@@ -160,16 +151,16 @@ export const timePasses = (ms: number = 0): Promise<void> =>
  * @param {string} eventName
  * @param {?Function} predicate
  */
-export const waitForEvent = <T extends AnyEvent = Event>(
-    target: EventTarget|EventDispatcher,
-    eventName: string,
-    predicate: PredicateFunction<T>|null = null): Promise<T> =>
-    new Promise(resolve => {
-      function handler(event: AnyEvent) {
-        if (!predicate || predicate(event as T)) {
-          resolve(event as T);
-          target.removeEventListener(eventName, handler as any);
-        }
-      }
-      target.addEventListener(eventName, handler as any);
-    });
+export const waitForEvent =
+    <T>(target: any,
+        eventName: string,
+        predicate: PredicateFunction<T>|null = null): Promise<T> =>
+        new Promise(resolve => {
+          function handler(event: T) {
+            if (!predicate || predicate(event)) {
+              resolve(event);
+              target.removeEventListener(eventName, handler);
+            }
+          }
+          target.addEventListener(eventName, handler);
+        });