Merge pull request #10899 from aardgoose/multiMaterial-fixes

MultiMaterial removal from examples

examples/canvas_geometry_panorama.html

@@ -81,7 +81,7 @@
 
 				];
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), new THREE.MultiMaterial( materials ) );
+				mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );
 				mesh.scale.x = - 1;
 				scene.add( mesh );
 

examples/canvas_geometry_panorama_fisheye.html

@@ -81,7 +81,7 @@
 
 				];
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), new THREE.MultiMaterial( materials ) );
+				mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), materials );
 				mesh.scale.x = - 1;
 				scene.add( mesh );
 

examples/canvas_geometry_text.html

@@ -92,12 +92,12 @@
 
 				var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
 
-				var material = new THREE.MultiMaterial( [
+				var materials = [
 					new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
 					new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
-				] );
+				];
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, materials );
 
 				mesh.position.x = centerOffset;
 				mesh.position.y = 100;

examples/canvas_materials.html

@@ -93,7 +93,7 @@
 
 				}
 
-				materials.push( new THREE.MultiMaterial( materials ) );
+				materials.push( materials );
 
 				objects = [];
 

examples/js/Car.js

@@ -299,8 +299,8 @@ THREE.Car = function () {
 			var s = scope.modelScale,
 				delta = new THREE.Vector3();
 
-			var bodyFaceMaterial = new THREE.MultiMaterial( scope.bodyMaterials );
-			var wheelFaceMaterial = new THREE.MultiMaterial( scope.wheelMaterials );
+			var bodyFaceMaterial = scope.bodyMaterials;
+			var wheelFaceMaterial = scope.wheelMaterials;
 
 			// body
 

examples/js/UCSCharacter.js

@@ -44,7 +44,7 @@ THREE.UCSCharacter = function() {
 			geometry.computeBoundingBox();
 			geometry.computeVertexNormals();
 
-			mesh = new THREE.SkinnedMesh( geometry, new THREE.MultiMaterial() );
+			mesh = new THREE.SkinnedMesh( geometry, [] );
 			mesh.name = config.character;
 			scope.root.add( mesh );
 

examples/webgl_animation_skinning_morph.html

@@ -215,7 +215,7 @@
 
 				}
 
-				mesh = new THREE.SkinnedMesh( geometry, new THREE.MultiMaterial( materials ) );
+				mesh = new THREE.SkinnedMesh( geometry, materials );
 				mesh.name = "Knight Mesh";
 				mesh.position.set( x, y - bb.min.y * s, z );
 				mesh.scale.set( s, s, s );
@@ -225,7 +225,7 @@
 				mesh.receiveShadow = true;
 
 
-				mesh2 = new THREE.SkinnedMesh( geometry, new THREE.MultiMaterial( materials ) );
+				mesh2 = new THREE.SkinnedMesh( geometry, materials );
 				mesh2.name = "Lil' Bro Mesh";
 				mesh2.position.set( x - 240, y - bb.min.y * s, z + 500 );
 				mesh2.scale.set( s / 2, s / 2, s / 2 );

examples/webgl_effects_parallaxbarrier.html

@@ -517,7 +517,7 @@
 
 			}
 
-			function attachButtonMaterials( materials, faceMaterial, material_indices, car ) {
+			function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
 
 				for( var i = 0; i < materials.length; i++ ) {
 
@@ -526,7 +526,7 @@
 
 						for ( var j = 0; j < material_indices.length; j ++ ) {
 
-							faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
+							faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
 
 						}
 
@@ -540,7 +540,7 @@
 
 				geometry.sortFacesByMaterialIndex();
 
-				var m = new THREE.MultiMaterial(),
+				var m = [],
 					s = CARS[ car ].scale * 1,
 					r = CARS[ car ].init_rotation,
 					materials = CARS[ car ].materials,
@@ -549,7 +549,7 @@
 
 				for( var i in CARS[ car ].mmap ) {
 
-					m.materials[ i ] = CARS[ car ].mmap[ i ];
+					m[ i ] = CARS[ car ].mmap[ i ];
 
 				}
 

examples/webgl_geometry_colors_blender.html

@@ -107,7 +107,7 @@
 
 				materials[ 0 ].shading = THREE.FlatShading;
 
-				mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
+				mesh = new THREE.Mesh( geometry, materials );
 				mesh.position.x = 400;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 250;
 				scene.add( mesh );
@@ -118,7 +118,7 @@
 
 				materials[ 0 ].shading = THREE.FlatShading;
 
-				mesh2 = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
+				mesh2 = new THREE.Mesh( geometry, materials );
 				mesh2.position.x = - 400;
 				mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = 250;
 				scene.add( mesh2 );

examples/webgl_geometry_extrude_shapes.html

@@ -170,7 +170,7 @@
 
 				var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
 
-				var mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
+				var mesh = new THREE.Mesh( geometry, materials );
 
 				mesh.position.set( 50, 100, 50 );
 

examples/webgl_geometry_text.html

@@ -52,7 +52,7 @@
 
 			var camera, cameraTarget, scene, renderer;
 
-			var group, textMesh1, textMesh2, textGeo, material;
+			var group, textMesh1, textMesh2, textGeo, materials;
 
 			var firstLetter = true;
 
@@ -181,10 +181,10 @@
 
 				}
 
-				material = new THREE.MultiMaterial( [
+				materials = [
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
-				] );
+				];
 
 				group = new THREE.Group();
 				group.position.y = 100;
@@ -427,7 +427,7 @@
 
 				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				textMesh1 = new THREE.Mesh( textGeo, material );
+				textMesh1 = new THREE.Mesh( textGeo, materials );
 
 				textMesh1.position.x = centerOffset;
 				textMesh1.position.y = hover;
@@ -440,7 +440,7 @@
 
 				if ( mirror ) {
 
-					textMesh2 = new THREE.Mesh( textGeo, material );
+					textMesh2 = new THREE.Mesh( textGeo, materials );
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = -hover;

examples/webgl_geometry_text_earcut.html

@@ -110,7 +110,7 @@
 
 			var camera, cameraTarget, scene, renderer;
 
-			var group, textMesh1, textMesh2, textGeo, material;
+			var group, textMesh1, textMesh2, textGeo, materials;
 
 			var firstLetter = true;
 
@@ -239,10 +239,10 @@
 
 				}
 
-				material = new THREE.MultiMaterial( [
+				materials = [
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
-				] );
+				];
 
 				group = new THREE.Group();
 				group.position.y = 100;
@@ -485,7 +485,7 @@
 
 				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				textMesh1 = new THREE.Mesh( textGeo, material );
+				textMesh1 = new THREE.Mesh( textGeo, materials );
 
 				textMesh1.position.x = centerOffset;
 				textMesh1.position.y = hover;
@@ -498,7 +498,7 @@
 
 				if ( mirror ) {
 
-					textMesh2 = new THREE.Mesh( textGeo, material );
+					textMesh2 = new THREE.Mesh( textGeo, materials );
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = -hover;

examples/webgl_geometry_text_pnltri.html

@@ -82,7 +82,7 @@
 
 			var camera, cameraTarget, scene, renderer;
 
-			var group, textMesh1, textMesh2, textGeo, material;
+			var group, textMesh1, textMesh2, textGeo, materials;
 
 			var firstLetter = true;
 
@@ -211,10 +211,10 @@
 
 				}
 
-				material = new THREE.MultiMaterial( [
+				materials = [
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front
 					new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side
-				] );
+				];
 
 				group = new THREE.Group();
 				group.position.y = 100;
@@ -457,7 +457,7 @@
 
 				var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				textMesh1 = new THREE.Mesh( textGeo, material );
+				textMesh1 = new THREE.Mesh( textGeo, materials );
 
 				textMesh1.position.x = centerOffset;
 				textMesh1.position.y = hover;
@@ -470,7 +470,7 @@
 
 				if ( mirror ) {
 
-					textMesh2 = new THREE.Mesh( textGeo, material );
+					textMesh2 = new THREE.Mesh( textGeo, materials );
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = -hover;

examples/webgl_loader_ctm_materials.html

@@ -254,23 +254,6 @@
 
 			//
 
-			function createScene( geometry, materials, x, y, z, s ) {
-
-				geometry.center();
-
-				hackMaterials( materials );
-
-				var material = new THREE.MultiMaterial( materials );
-
-				mesh = new THREE.Mesh( geometry, material );
-				mesh.position.set( x, y, z );
-				mesh.scale.set( s, s, s );
-				scene.add( mesh );
-
-			}
-
-			//
-
 			function onWindowResize( event ) {
 
 				SCREEN_WIDTH = window.innerWidth;

examples/webgl_loader_json_blender.html

@@ -108,8 +108,6 @@
 					material.morphTargets = true;
 					material.color.setHex( 0xffaaaa );
 
-					var faceMaterial = new THREE.MultiMaterial( materials );
-
 					for ( var i = 0; i < 729; i ++ ) {
 
 						// random placement in a grid
@@ -121,7 +119,7 @@
 
 						if ( Math.abs( x ) < 2 && Math.abs( z ) < 2 ) continue;
 
-						mesh = new THREE.Mesh( geometry, faceMaterial );
+						mesh = new THREE.Mesh( geometry, materials );
 
 						var s = THREE.Math.randFloat( 0.00075, 0.001 );
 						mesh.scale.set( s, s, s );

examples/webgl_loader_json_objconverter.html

@@ -217,7 +217,7 @@
 
 			function createScene( geometry, materials, x, y, z, b ) {
 
-				zmesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
+				zmesh = new THREE.Mesh( geometry, materials );
 				zmesh.position.set( x, y, z );
 				zmesh.scale.set( 3, 3, 3 );
 				scene.add( zmesh );

examples/webgl_materials.html

@@ -108,7 +108,7 @@
 
 				}
 
-				addMesh( geometry, new THREE.MultiMaterial( materials ) );
+				addMesh( geometry, materials );
 
 				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.add( particleLight );

examples/webgl_materials_cars.html

@@ -516,7 +516,7 @@
 
 			}
 
-			function attachButtonMaterials( materials, faceMaterial, material_indices, car ) {
+			function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
 
 				for( var i = 0; i < materials.length; i ++ ) {
 
@@ -525,7 +525,7 @@
 
 						for ( var j = 0; j < material_indices.length; j ++ ) {
 
-							faceMaterial.materials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
+							faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
 
 						}
 
@@ -539,7 +539,7 @@
 
 				geometry.sortFacesByMaterialIndex();
 
-				var m = new THREE.MultiMaterial(),
+				var m = [],
 					s = CARS[ car ].scale * 1,
 					r = CARS[ car ].init_rotation,
 					materials = CARS[ car ].materials,
@@ -548,7 +548,7 @@
 
 				for ( var i in CARS[ car ].mmap ) {
 
-					m.materials[ i ] = CARS[ car ].mmap[ i ];
+					m[ i ] = CARS[ car ].mmap[ i ];
 
 				}
 

examples/webgl_materials_lightmap.html

@@ -149,7 +149,7 @@
 
 					}
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
+					var mesh = new THREE.Mesh( geometry, materials );
 
 					mesh.scale.multiplyScalar( 100 );
 					scene.add( mesh );

examples/webgl_nearestneighbour.html

@@ -109,7 +109,7 @@
 
 				];
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), new THREE.MultiMaterial( materials ) );
+				mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), materials );
 				mesh.scale.x = - 1;
 				scene.add(mesh);
 

examples/webgl_objects_update.html

@@ -47,22 +47,22 @@
 
 				//
 
-				var object = createObject( createMultiMaterial(), 1 );
+				var object = createObject( createMaterials(), 1 );
 				object.position.set( -100, 100, 0 );
 				scene.add( object );
 				objectNewGeometry = object;
 
-				object = createObject( createMultiMaterial(), 1 );
+				object = createObject( createMaterials(), 1 );
 				object.position.set( 100, 100, 0 );
 				scene.add( object );
 				objectToggleAddRemove = object;
 
-				object = createObject( createMultiMaterial(), 4 );
+				object = createObject( createMaterials(), 4 );
 				object.position.set( -100, -100, 0 );
 				scene.add( object );
 				objectRandomizeFaces = object;
 
-				object = createObject( createMultiMaterial(), 4 );
+				object = createObject( createMaterials(), 4 );
 				object.position.set( 100, -100, 0 );
 				scene.add( object );
 				objectRandomizeMaterialIndices = object;
@@ -99,7 +99,7 @@
 
 			}
 
-			function createMultiMaterial(){
+			function createMaterials(){
 				var materials = [
 					new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
 					new THREE.MeshBasicMaterial( { color: 0xffff00 } ),
@@ -109,7 +109,7 @@
 					new THREE.MeshBasicMaterial( { color: 0xff00ff } )
 				];
 
-				return new THREE.MultiMaterial( materials );
+				return materials;
 			}
 
 			function onWindowResize() {

examples/webgl_panorama_cube.html

@@ -74,7 +74,7 @@
 
 			}
 
-			var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MultiMaterial( materials ) );
+			var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), materials );
 			skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, - 1 ) );
 			scene.add( skyBox );
 

examples/webgl_simple_gi.html

@@ -42,7 +42,9 @@
 
 			THREE.Mesh.prototype.clone = function () {
 
-				return new this.constructor( this.geometry.clone(), this.material.clone() ).copy( this );
+				var newMaterial = ( this.material.isMaterial ) ? this.material.clone() : this.material.slice();
+
+				return new this.constructor( this.geometry.clone(), newMaterial ).copy( this );
 
 			};
 
@@ -211,9 +213,8 @@
 				}
 
 				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
-				var material = new THREE.MultiMaterial( materials );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, materials );
 				scene.add( mesh );
 
 				//

examples/webgl_skinning_simple.html

@@ -69,7 +69,7 @@
 
 					}
 
-					skinnedMesh = new THREE.SkinnedMesh(geometry, new THREE.MultiMaterial(materials));
+					skinnedMesh = new THREE.SkinnedMesh(geometry, materials );
 					skinnedMesh.scale.set( 1, 1, 1 );
 
 					// Note: We test the corresponding code path with this example -