[three] Update object materials to match documentation (#29518)

* Update accepted material types to match documentation

* Fix aframe-io-tests

* Fix SpriteCanvasMaterial

* Fix MeshFaceMaterial

* Fix SpriteMaterial

* Use tabs?!?

* Allow arrays

* Spaces

* Fix build

* Try again

types/aframe/test/aframe-io-tests.ts

@@ -533,9 +533,10 @@ AFRAME.registerComponent('audioanalyser-waveform', {
 		rings.forEach(function transformRing(ring: THREE.Line, index: number) {
 			var normLevel;
 			normLevel = levels[RINGCOUNT - index - 1] + 0.01; // Avoid scaling by 0.
-			(ring.material as THREE.LineBasicMaterial).color.setHSL(colors[index], 1, normLevel);
-			ring.material.linewidth = normLevel * 3;
-			ring.material.opacity = normLevel;
+			const lineMaterial = ring.material as THREE.LineBasicMaterial;
+			lineMaterial.color.setHSL(colors[index], 1, normLevel);
+			lineMaterial.linewidth = normLevel * 3;
+			lineMaterial.opacity = normLevel;
 			ring.scale.z = normLevel;
 		});
 	},

types/three/test/webgl/webgl_helpers.ts

@@ -50,9 +50,10 @@
             scene.add(new THREE.VertexNormalsHelper(mesh, 10));
 
             var helper = new THREE.WireframeHelper(mesh);
-            helper.material.depthTest = false;
-            helper.material.opacity = 0.25;
-            helper.material.transparent = true;
+            var wireframeMaterial = helper.material as THREE.Material;
+            wireframeMaterial.depthTest = false;
+            wireframeMaterial.opacity = 0.25;
+            wireframeMaterial.transparent = true;
             scene.add(helper);
 
             scene.add(new THREE.BoxHelper(mesh));
@@ -92,4 +93,4 @@
 
     }
 
-}
+}

types/three/test/webgl/webgl_sprites.ts

@@ -129,7 +129,7 @@
         var width = window.innerWidth / 2;
         var height = window.innerHeight / 2;
 
-        var material = spriteTL.material;
+        var material = spriteTL.material as THREE.SpriteMaterial;
 
         var imageWidth = material.map.image.width / 2;
         var imageHeight = material.map.image.height / 2;
@@ -176,7 +176,7 @@
         for ( var i = 0, l = group.children.length; i < l; i ++ ) {
 
             var sprite = group.children[ i ] as THREE.Sprite;
-            var material = sprite.material;
+            var material = sprite.material as THREE.SpriteMaterial;
             var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
 
             var imageWidth = 1;
@@ -189,7 +189,7 @@
 
             }
 
-            sprite.material.rotation += 0.1 * ( i / l );
+            material.rotation += 0.1 * ( i / l );
             sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
 
             if ( material.map !== mapC ) {
@@ -210,4 +210,4 @@
         renderer.render( sceneOrtho, cameraOrtho );
 
     }
-}
+}

types/three/three-core.d.ts

@@ -5233,26 +5233,15 @@ export class LOD extends Object3D {
     objects: any[];
 }
 
-
-/**
- * An intermediate material type that casts more precisely the possible materials assignable to a [[Line]] object.
- *
- * [[LineDashedMaterial]] is omitted as it extends [[LineBasicMaterial]].
- *
- * // Todo:
- * // - can [[Line]] take in an array of materials ?
- */
-export type LineMaterialType = LineBasicMaterial | ShaderMaterial | MeshDepthMaterial;
-
 export class Line extends Object3D {
     constructor(
         geometry?: Geometry | BufferGeometry,
-        material?: LineMaterialType | LineMaterialType[],
+        material?: Material | Material[],
         mode?: number
     );
 
-    geometry: Geometry|BufferGeometry;
-    material: LineBasicMaterial | LineDashedMaterial | ShaderMaterial;
+    geometry: Geometry | BufferGeometry;
+    material: Material | Material[];
 
     type: "Line";
     isLine: true;
@@ -5273,23 +5262,16 @@ export const LinePieces: number;
 export class LineSegments extends Line {
     constructor(
         geometry?: Geometry | BufferGeometry,
-        material?: LineMaterialType | LineMaterialType[],
+        material?: Material | Material[],
         mode?: number
     );
 }
 
-/**
- * An intermediate material type that casts more precisely the possible materials assignable to a [[Mesh]] object.
- *
- * `MeshToonMaterial` and [[MeshPhysicalMaterial]] are omitted as they extend [[MeshPhongMaterial]] and [[MeshStandardMaterial]] respectively.
- */
-export type MeshMaterialType = MeshBasicMaterial | MeshDepthMaterial | MeshFaceMaterial | MeshLambertMaterial | MeshNormalMaterial | MeshPhongMaterial | MeshStandardMaterial | ShaderMaterial | ShadowMaterial;
-
 export class Mesh extends Object3D {
-    constructor(geometry?: Geometry | BufferGeometry, material?: MeshMaterialType | MeshMaterialType[]);
+    constructor(geometry?: Geometry | BufferGeometry, material?: Material | Material[]);
 
-    geometry: Geometry|BufferGeometry;
-    material: MeshMaterialType | MeshMaterialType[];
+    geometry: Geometry | BufferGeometry;
+    material: Material | Material[];
     drawMode: TrianglesDrawModes;
     morphTargetInfluences?: number[];
     morphTargetDictionary?: { [key: string]: number; };
@@ -5302,14 +5284,6 @@ export class Mesh extends Object3D {
     copy(source: this, recursive?: boolean): this;
 }
 
-/**
- * An intermediate material type that casts more precisely the possible materials assignable to a [[Points]] object.
- *
- * // Todo:
- * // - can [[Points]] take in an array of materials ?
- */
-export type PointsMaterialType = PointsMaterial | ShaderMaterial | MeshDepthMaterial;
-
 /**
  * A class for displaying particles in the form of variable size points. For example, if using the WebGLRenderer, the particles are displayed using GL_POINTS.
  *
@@ -5323,7 +5297,7 @@ export class Points extends Object3D {
      */
     constructor(
         geometry?: Geometry | BufferGeometry,
-        material?: PointsMaterialType | PointsMaterialType[]
+        material?: Material | Material[]
     );
 
     type: "Points";
@@ -5337,7 +5311,7 @@ export class Points extends Object3D {
     /**
      * An instance of Material, defining the object's appearance. Default is a PointsMaterial with randomised colour.
      */
-    material: PointsMaterial | ShaderMaterial;
+    material: Material | Material[];
 
     raycast(raycaster: Raycaster, intersects: Intersection[]): void;
 }
@@ -5373,13 +5347,7 @@ export class Skeleton {
 }
 
 export class SkinnedMesh extends Mesh {
-    constructor(geometry?: Geometry|BufferGeometry, material?: MeshBasicMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: MeshDepthMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: MultiMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: MeshLambertMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: MeshNormalMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: MeshPhongMaterial, useVertexTexture?: boolean);
-    constructor(geometry?: Geometry|BufferGeometry, material?: ShaderMaterial, useVertexTexture?: boolean);
+    constructor(geometry?: Geometry | BufferGeometry, material?: Material | Material[], useVertexTexture?: boolean);
 
     bindMode: string;
     bindMatrix: Matrix4;
@@ -5398,7 +5366,7 @@ export class Sprite extends Object3D {
     type: "Sprite";
     isSprite: true;
 
-    material: SpriteMaterial;
+    material: Material;
     center: Vector2;
 
     raycast(raycaster: Raycaster, intersects: Intersection[]): void;