R151 redux

packages/model-viewer/karma.conf.js

@@ -73,7 +73,7 @@ module.exports = function(config) {
     customLaunchers: {
       ChromeHeadlessNoSandbox: {
         base: 'ChromeHeadless',
-        flags: ['--no-sandbox'],
+        flags: ['--no-sandbox', '--use-angle=metal'],
       }
     },
   });

packages/model-viewer/package.json

@@ -76,7 +76,7 @@
     "lit": "^2.2.3"
   },
   "peerDependencies": {
-    "three": "^0.150.0"
+    "three": "^0.151.2"
   },
   "devDependencies": {
     "@open-wc/karma-esm": "^4.0.0",
@@ -86,7 +86,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.149.0",
+    "@types/three": "^0.150.0",
     "@ungap/event-target": "^0.2.3",
     "chai": "^4.3.6",
     "focus-visible": "^5.2.0",
@@ -106,7 +106,7 @@
     "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "4.8.4",
-    "three": "^0.150.0"
+    "three": "^0.151.2"
   },
   "publishConfig": {
     "access": "public"

packages/model-viewer/src/features/scene-graph/material.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {Color, DoubleSide, FrontSide, MeshStandardMaterial} from 'three';
+import {Color, ColorRepresentation, DoubleSide, FrontSide, MeshStandardMaterial} from 'three';
 
 import {AlphaMode, GLTF, Material as GLTFMaterial, RGB} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {Material as DefaultedMaterial} from '../../three-components/gltf-instance/gltf-defaulted.js';
@@ -258,7 +258,7 @@ export class Material extends ThreeDOMElement implements MaterialInterface {
     if (rgb instanceof Array) {
       color.fromArray(rgb);
     } else {
-      color.set(rgb).convertSRGBToLinear();
+      color.set(rgb as ColorRepresentation).convertSRGBToLinear();
     }
     for (const material of this[$correlatedObjects] as
          Set<MeshStandardMaterial>) {

packages/model-viewer/src/features/scene-graph/pbr-metallic-roughness.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {Color, MeshStandardMaterial} from 'three';
+import {Color, ColorRepresentation, MeshStandardMaterial} from 'three';
 
 import {GLTF, PBRMetallicRoughness as GLTFPBRMetallicRoughness} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {PBRMetallicRoughness as DefaultedPBRMetallicRoughness} from '../../three-components/gltf-instance/gltf-defaulted.js';
@@ -110,7 +110,7 @@ export class PBRMetallicRoughness extends ThreeDOMElement implements
     if (rgba instanceof Array) {
       color.fromArray(rgba);
     } else {
-      color.set(rgba).convertSRGBToLinear();
+      color.set(rgba as ColorRepresentation).convertSRGBToLinear();
     }
     for (const material of this[$threeMaterials]) {
       material.color.set(color);

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {AnimationAction, AnimationClip, AnimationMixer, Box3, Camera, Euler, Event as ThreeEvent, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, Triangle, Vector2, Vector3, WebGLRenderer} from 'three';
+import {AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, Box3, Camera, Euler, Event as ThreeEvent, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, Triangle, Vector2, Vector3, WebGLRenderer} from 'three';
 import {CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 // @ts-ignore
 import {reduceVertices} from 'three/examples/jsm/utils/SceneUtils.js';
@@ -663,7 +663,8 @@ export class ModelScene extends Scene {
    */
   playAnimation(
       name: string|null = null, crossfadeTime: number = 0,
-      loopMode: number = LoopRepeat, repetitionCount: number = Infinity) {
+      loopMode: AnimationActionLoopStyles = LoopRepeat,
+      repetitionCount: number = Infinity) {
     if (this._currentGLTF == null) {
       return;
     }

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

@@ -147,7 +147,7 @@ export class Renderer extends EventDispatcher {
       });
       this.threeRenderer.autoClear = true;
       this.threeRenderer.outputEncoding = sRGBEncoding;
-      this.threeRenderer.physicallyCorrectLights = true;
+      this.threeRenderer.useLegacyLights = false;
       this.threeRenderer.setPixelRatio(1);  // handle pixel ratio externally
 
       this.debugger = !!options.debug ? new Debugger(this) : null;