r157

packages/model-viewer-effects/README.md

@@ -52,7 +52,7 @@ npm install three @google/model-viewer @google/model-viewer-effects
 <script type="importmap">
   {
     "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@^0.156.1/build/three.module.min.js"
+      "three": "https://cdn.jsdelivr.net/npm/three@^0.157.0/build/three.module.min.js"
     }
   }
 </script>

packages/model-viewer-effects/package.json

@@ -72,7 +72,7 @@
   ],
   "dependencies": {
     "lit": "^2.2.3",
-    "postprocessing": "^6.30.2"
+    "postprocessing": "^6.33.2"
   },
   "peerDependencies": {
     "@google/model-viewer": "^3.2.1"
@@ -85,7 +85,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.156.0",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-playwright": "^0.10.0",
@@ -100,6 +100,7 @@
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "three": "^0.157.0",
     "typescript": "4.8.4"
   },
   "publishConfig": {

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

@@ -189,10 +189,10 @@ export const waitForEvent = <T extends AnyEvent = Event>(
       function handler(event: AnyEvent) {
         if (!predicate || predicate(event as T)) {
           resolve(event as T);
-          target.removeEventListener(eventName, handler);
+          target.removeEventListener(eventName, handler as any);
         }
       }
-      target.addEventListener(eventName, handler);
+      target.addEventListener(eventName, handler as any);
     });
 
 export interface TypedArray<T = unknown> {

packages/model-viewer/package.json

@@ -86,7 +86,7 @@
     "lit": "^2.7.2"
   },
   "peerDependencies": {
-    "three": "^0.156.1"
+    "three": "^0.157.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.1",
@@ -95,7 +95,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.156.0",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-playwright": "^0.10.0",
@@ -109,7 +109,7 @@
     "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "4.8.4",
-    "three": "^0.156.1"
+    "three": "^0.157.0"
   },
   "publishConfig": {
     "access": "public"

packages/model-viewer/src/features/ar.ts

@@ -14,7 +14,6 @@
  */
 
 import {property} from 'lit/decorators.js';
-import {Event as ThreeEvent} from 'three';
 import {USDZExporter} from 'three/examples/jsm/exporters/USDZExporter.js';
 
 import {IS_AR_QUICKLOOK_CANDIDATE, IS_SCENEVIEWER_CANDIDATE, IS_WEBXR_AR_CANDIDATE} from '../constants.js';
@@ -117,7 +116,7 @@ export const ARMixin = <T extends Constructor<ModelViewerElementBase>>(
       this.activateAR();
     };
 
-    private[$onARStatus] = ({status}: ThreeEvent) => {
+    private[$onARStatus] = ({status}: {status: ARStatus}) => {
       if (status === ARStatus.NOT_PRESENTING ||
           this[$renderer].arRenderer.presentedScene === this[$scene]) {
         this.setAttribute('ar-status', status);
@@ -131,7 +130,7 @@ export const ARMixin = <T extends Constructor<ModelViewerElementBase>>(
       }
     };
 
-    private[$onARTracking] = ({status}: ThreeEvent) => {
+    private[$onARTracking] = ({status}: {status: ARTracking}) => {
       this.setAttribute('ar-tracking', status);
       this.dispatchEvent(new CustomEvent<ARTrackingDetails>(
           'ar-tracking', {detail: {status}}));
@@ -306,7 +305,8 @@ configuration or device capabilities');
       const location = self.location.toString();
       const locationUrl = new URL(location);
       const modelUrl = new URL(this.src!, location);
-      if( modelUrl.hash ) modelUrl.hash = '';
+      if (modelUrl.hash)
+        modelUrl.hash = '';
       const params = new URLSearchParams(modelUrl.search);
 
       locationUrl.hash = noArViewerSigil;
@@ -399,9 +399,11 @@ configuration or device capabilities');
         anchor.setAttribute('download', 'model.usdz');
       }
 
-      // attach anchor to shadow DOM to ensure iOS16 ARQL banner click message event propagation 
+      // attach anchor to shadow DOM to ensure iOS16 ARQL banner click message
+      // event propagation
       anchor.style.display = 'none';
-      if(!anchor.isConnected) this.shadowRoot!.appendChild(anchor);
+      if (!anchor.isConnected)
+        this.shadowRoot!.appendChild(anchor);
 
       console.log('Attempting to present in AR with Quick Look...');
       anchor.click();

packages/model-viewer/src/features/environment.ts

@@ -130,7 +130,6 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
 
         this[$scene].setEnvironmentAndSkybox(
             this[$currentEnvironmentMap], this[$currentBackground]);
-        this[$scene].dispatchEvent({type: 'envmap-update'});
       } catch (errorOrPromise) {
         if (errorOrPromise instanceof Error) {
           this[$scene].setEnvironmentAndSkybox(null, null);

packages/model-viewer/src/test/features/environment-spec.ts

@@ -34,7 +34,7 @@ const MODEL_URL = assetPath('models/reflective-sphere.gltf');
  */
 const waitForLoadAndEnvMap = (element: ModelViewerElementBase) => {
   const load = waitForEvent(element, 'poster-dismissed');
-  const envMap = waitForEvent(element[$scene], 'envmap-update');
+  const envMap = waitForEvent(element, 'environment-change');
   return Promise.all([load, envMap]);
 };
 
@@ -77,7 +77,7 @@ suite('Environment', () => {
         document.body.insertBefore(element, document.body.firstChild);
 
         environmentChanges = 0;
-        scene.addEventListener('envmap-update', () => {
+        element.addEventListener('environment-change', () => {
           environmentChanges++;
         });
         await onLoad;
@@ -162,7 +162,7 @@ suite('Environment', () => {
 
     suite('and environment-image subsequently removed', () => {
       setup(async () => {
-        const envMapChanged = waitForEvent(scene, 'envmap-update');
+        const envMapChanged = waitForEvent(element, 'environment-change');
         element.removeAttribute('environment-image');
         await envMapChanged;
       });
@@ -220,9 +220,9 @@ suite('Environment', () => {
 
       suite('and skybox-image subsequently removed', () => {
         setup(async () => {
-          const envMapChanged = waitForEvent(scene, 'envmap-update');
           element.removeAttribute('skybox-image');
-          await envMapChanged;
+          await element.updateComplete;
+          await rafPasses();
         });
 
         test('continues using environment-image as environment map', () => {
@@ -237,7 +237,7 @@ suite('Environment', () => {
 
     suite('and skybox-image subsequently removed', () => {
       setup(async () => {
-        const envMapChanged = waitForEvent(scene, 'envmap-update');
+        const envMapChanged = waitForEvent(element, 'environment-change');
         element.removeAttribute('skybox-image');
         await envMapChanged;
       });

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

@@ -77,7 +77,8 @@ const matrix4 = new Matrix4();
 const hitPosition = new Vector3();
 const camera = new PerspectiveCamera(45, 1, 0.1, 100);
 
-export class ARRenderer extends EventDispatcher {
+export class ARRenderer extends EventDispatcher<
+    {status: {status: ARStatus}, tracking: {status: ARTracking}}> {
   public threeRenderer: WebGLRenderer;
   public currentSession: XRSession|null = null;
   public placeOnWall = false;

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {Event as ThreeEvent, EventDispatcher, Texture, WebGLRenderer} from 'three';
+import {EventDispatcher, Texture, WebGLRenderer} from 'three';
 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';
@@ -26,12 +26,6 @@ import {GLTFInstance, GLTFInstanceConstructor} from './GLTFInstance.js';
 
 export type ProgressCallback = (progress: number) => void;
 
-export interface PreloadEvent extends ThreeEvent {
-  type: 'preload';
-  element: ModelViewerElementBase;
-  src: String;
-}
-
 (Texture as any).DEFAULT_ANISOTROPY = 4;
 
 /**
@@ -90,7 +84,8 @@ const $GLTFInstance = Symbol('GLTFInstance');
 
 export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
                                              GLTFInstanceConstructor> extends
-    EventDispatcher {
+    EventDispatcher<
+        {'preload': {element: ModelViewerElementBase, src: String}}> {
   static withCredentials: boolean;
 
   static setDRACODecoderLocation(url: string) {
@@ -194,8 +189,7 @@ export class CachingGLTFLoader<T extends GLTFInstanceConstructor =
       url: string, element: ModelViewerElementBase,
       progressCallback: ProgressCallback = () => {}) {
     this[$loader].setWithCredentials(CachingGLTFLoader.withCredentials);
-    this.dispatchEvent(
-        {type: 'preload', element: element, src: url} as PreloadEvent);
+    this.dispatchEvent({type: 'preload', element: element, src: url});
     if (!cache.has(url)) {
       if (meshoptDecoder != null) {
         this[$loader].setMeshoptDecoder(await meshoptDecoder);

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

@@ -57,7 +57,7 @@ export const DEFAULT_POWER_PREFERENCE: string = 'high-performance';
  * Canvas2DRenderingContext if supported for cheaper transferring of
  * the texture.
  */
-export class Renderer extends EventDispatcher {
+export class Renderer extends EventDispatcher<{contextlost:{sourceEvent:WebGLContextEvent}}> {
   private static _singleton = new Renderer({
     powerPreference:
         (((self as any).ModelViewerElement || {}) as ModelViewerGlobalConfig)

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

@@ -125,7 +125,11 @@ export interface PointerChangeEvent extends ThreeEvent {
  * has been set in terms of position, rotation and scale, so it is important to
  * ensure that the camera's matrixWorld is in sync before using SmoothControls.
  */
-export class SmoothControls extends EventDispatcher {
+export class SmoothControls extends EventDispatcher<{
+  'user-interaction': {},
+  'pointer-change-start': {},
+  'pointer-change-end': {}
+}> {
   public orbitSensitivity = 1;
   public zoomSensitivity = 1;
   public panSensitivity = 1;
@@ -586,7 +590,8 @@ export class SmoothControls extends EventDispatcher {
   private initializePan() {
     const {theta, phi} = this.spherical;
     const psi = theta - this.scene.yaw;
-    this.panPerPixel = PAN_SENSITIVITY * this.panSensitivity / this.scene.height;
+    this.panPerPixel =
+        PAN_SENSITIVITY * this.panSensitivity / this.scene.height;
     this.panProjection.set(
         -Math.cos(psi),
         -Math.cos(phi) * Math.sin(psi),
@@ -821,7 +826,8 @@ export class SmoothControls extends EventDispatcher {
     this.changeSource = ChangeSource.USER_INTERACTION;
 
     const deltaZoom = (event as WheelEvent).deltaY *
-        ((event as WheelEvent).deltaMode == 1 ? 18 : 1) * ZOOM_SENSITIVITY * this.zoomSensitivity / 30;
+        ((event as WheelEvent).deltaMode == 1 ? 18 : 1) * ZOOM_SENSITIVITY *
+        this.zoomSensitivity / 30;
     this.userAdjustOrbit(0, 0, deltaZoom);
 
     event.preventDefault();
@@ -860,7 +866,8 @@ export class SmoothControls extends EventDispatcher {
         this.userAdjustOrbit(0, 0, ZOOM_SENSITIVITY * this.zoomSensitivity);
         break;
       case 'PageDown':
-        this.userAdjustOrbit(0, 0, -1 * ZOOM_SENSITIVITY * this.zoomSensitivity);
+        this.userAdjustOrbit(
+            0, 0, -1 * ZOOM_SENSITIVITY * this.zoomSensitivity);
         break;
       case 'ArrowUp':
         this.userAdjustOrbit(0, -KEYBOARD_ORBIT_INCREMENT, 0);

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {BackSide, BoxGeometry, CubeCamera, CubeTexture, EquirectangularReflectionMapping, EventDispatcher, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, sRGBEncoding, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
+import {BackSide, BoxGeometry, CubeCamera, CubeTexture, EquirectangularReflectionMapping, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, sRGBEncoding, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
 import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';
 
 import {deserializeUrl, timePasses} from '../utilities.js';
@@ -33,7 +33,7 @@ const MAX_SAMPLES = 20;
 
 const HDR_FILE_RE = /\.hdr(\.js)?$/;
 
-export default class TextureUtils extends EventDispatcher {
+export default class TextureUtils {
   public lottieLoaderUrl = '';
   public withCredentials = false;
 
@@ -50,7 +50,6 @@ export default class TextureUtils extends EventDispatcher {
   private blurScene: Scene|null = null;
 
   constructor(private threeRenderer: WebGLRenderer) {
-    super();
   }
 
   get ldrLoader(): TextureLoader {
@@ -72,7 +71,8 @@ export default class TextureUtils extends EventDispatcher {
 
   async getLottieLoader(): Promise<any> {
     if (this._lottieLoader == null) {
-      const {LottieLoader} = await import(/* webpackIgnore: true */ this.lottieLoaderUrl);
+      const {LottieLoader} =
+          await import(/* webpackIgnore: true */ this.lottieLoaderUrl);
       this._lottieLoader = new LottieLoader() as Loader;
     }
     this._lottieLoader.setWithCredentials(this.withCredentials);

packages/model-viewer/src/utilities.ts

@@ -258,8 +258,8 @@ export const waitForEvent = <T extends AnyEvent = Event>(
       function handler(event: AnyEvent) {
         if (!predicate || predicate(event as T)) {
           resolve(event as T);
-          target.removeEventListener(eventName, handler);
+          target.removeEventListener(eventName, handler as any);
         }
       }
-      target.addEventListener(eventName, handler);
+      target.addEventListener(eventName, handler as any);
     });

packages/modelviewer.dev/examples/postprocessing/index.html

@@ -32,7 +32,7 @@
   <script type="importmap">
     {
       "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@^0.156.1/build/three.module.min.js"
+        "three": "https://cdn.jsdelivr.net/npm/three@^0.157.0/build/three.module.min.js"
       }
     }
   </script>
@@ -104,7 +104,7 @@ <h2 class="demo-title">Setup Post Processing</h2>
 <script type="importmap-noexecute">
 {
   "imports": {
-    "three": "https://cdn.jsdelivr.net/npm/three@^0.156.1/build/three.module.min.js"
+    "three": "https://cdn.jsdelivr.net/npm/three@^0.157.0/build/three.module.min.js"
   }
 }
 </script>

packages/render-fidelity-tools/package.json

@@ -35,15 +35,15 @@
     "@types/pngjs": "^3.4.0",
     "@types/puppeteer": "^5.4.6",
     "@types/rimraf": "^3.0.1",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.156.0",
     "filament": "1.31.5",
     "http-server": "^14.1.1",
     "lit": "^2.7.2",
     "mkdirp": "^1.0.4",
     "pngjs": "^6.0.0",
     "puppeteer": "^21.3.4",
     "rimraf": "^3.0.2",
-    "three": "^0.148.0",
+    "three": "^0.157.0",
     "three-gpu-pathtracer": "^0.0.13"
   },
   "devDependencies": {