Examples: Remove usage of SceneUtils.createMultiMaterialObject()

examples/webgl_geometry_colors.html

@@ -47,8 +47,6 @@
 
 			var camera, scene, renderer;
 
-			var mesh, group1, group2, group3, light;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -67,7 +65,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -91,22 +89,24 @@
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				var shadowMesh;
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.position.x = - 400;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.position.x = 400;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.position.x = - 400;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
+
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.position.x = 400;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
 				var faceIndices = [ 'a', 'b', 'c' ];
 
@@ -124,7 +124,7 @@
 					f2 = geometry2.faces[ i ];
 					f3 = geometry3.faces[ i ];
 
-					for( var j = 0; j < 3; j++ ) {
+					for ( var j = 0; j < 3; j ++ ) {
 
 						vertexIndex = f[ faceIndices[ j ] ];
 
@@ -141,7 +141,7 @@
 						f2.vertexColors[ j ] = color;
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 0.5 );
+						color.setHSL( 0.125 * vertexIndex / geometry.vertices.length, 1.0, 0.5 );
 
 						f3.vertexColors[ j ] = color;
 
@@ -149,28 +149,28 @@
 
 				}
 
+				var mesh, wireframe;
 
-				var materials = [
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
-
-				];
-
-				group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
-				group1.position.x = -400;
-				group1.rotation.x = -1.87;
-				scene.add( group1 );
+				mesh = new THREE.Mesh( geometry, material );
+				wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = - 400;
+				mesh.rotation.x = - 1.87;
+				scene.add( mesh );
 
-				group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
-				group2.position.x = 400;
-				group2.rotation.x = 0;
-				scene.add( group2 );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = 400;
+				scene.add( mesh );
 
-				group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
-				group3.position.x = 0;
-				group3.rotation.x = 0;
-				scene.add( group3 );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh.add( wireframe );
+				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_geometry_extrude_splines.html

@@ -95,7 +95,7 @@
 			SampleClosedSpline: sampleClosedSpline
 		};
 
-		var parent, tubeGeometry, group;
+		var parent, tubeGeometry, mesh;
 
 		var params = {
 			spline: 'GrannyKnot',
@@ -114,12 +114,10 @@
 
 		function addTube() {
 
-			if ( group !== undefined ) {
+			if ( mesh !== undefined ) {
 
-				parent.remove( group );
-
-				group.children[ 0 ].geometry.dispose();
-				group.children[ 1 ].geometry.dispose();
+				parent.remove( mesh );
+				mesh.geometry.dispose();
 
 			}
 
@@ -135,7 +133,7 @@
 
 		function setScale() {
 
-			group.scale.set( params.scale, params.scale, params.scale );
+			mesh.scale.set( params.scale, params.scale, params.scale );
 
 		}
 
@@ -144,9 +142,11 @@
 
 			// 3D shape
 
-			group = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material, wireframeMaterial ] );
+			mesh = new THREE.Mesh( geometry, material );
+			var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+			mesh.add( wireframe );
 
-			parent.add( group );
+			parent.add( mesh );
 
 		}
 

examples/webgl_modifier_simplifier.html

@@ -26,8 +26,6 @@
 
 			var camera, controls, scene, renderer;
 
-			var cube, mesh, material;
-
 			var boxGeometry = new THREE.BoxGeometry( 80, 80, 80, 4, 4, 4 );
 			var torusGeometry = new THREE.TorusGeometry( 50, 25, 8, 8, Math.PI * 2 );
 			var sphereGeometry = new THREE.SphereGeometry( 50, 15, 15 );
@@ -50,48 +48,37 @@
 			var meshes = [];
 			var count = 0;
 
+			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 			init();
 			animate();
 
 
 			function addStuff( geometry ) {
-				count ++;
 
-				var simplified = modifer.modify( geometry, geometry.vertices.length * 0.5 | 0 );
-
-				var wireframe = new THREE.MeshBasicMaterial({
-					color: Math.random() * 0xffffff,
-					wireframe: true
-				});
+				count ++;
 
-				var materialNormal = new THREE.MeshNormalMaterial({
-					transparent: true,
-					opacity: 0.7
+				var mesh, wireframe;
 
-				});
+				var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
 
-				mesh = THREE.SceneUtils.createMultiMaterialObject( simplified, [
-					material,
-					wireframe,
-					// materialNormal
-				]);
+				var simplified = modifer.modify( geometry, geometry.vertices.length * 0.5 | 0 );
 
-				mesh.position.x = -200;
+				mesh = new THREE.Mesh( simplified, material );
+				wireframe = new THREE.Mesh( simplified, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = - 200;
 				mesh.position.y = count * 150 - 300;
 
 				scene.add( mesh );
 				meshes.push( mesh );
 
-
-				mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
-					material,
-					wireframe,
-					// materialNormal
-				]);
-
+				mesh = new THREE.Mesh( geometry, material );
+				wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				mesh.add( wireframe );
 				mesh.position.x = 200;
 				mesh.position.y = count * 150 - 300;
+
 				scene.add( mesh );
 				meshes.push ( mesh );
 

examples/webgl_modifier_subdivision.html

@@ -44,6 +44,9 @@
 
 			};
 
+			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
+			var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+			var smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } )
 
 			// Cube
 
@@ -183,7 +186,6 @@
 				if ( cube !== undefined ) {
 
 					geometry.dispose();
-					material.dispose();
 					smooth.dispose();
 
 					scene.remove( group );
@@ -211,8 +213,6 @@
 
 				updateInfo();
 
-				var faceABCD = "abcd";
-
 				// var TypedArrayHelper = function (size, registers, register_type, array_type, unit_size, accessors)
 				var colors = new TypedArrayHelper( 0, 1, THREE.Color, Float32Array, 3, [ 'r', 'g', 'b' ] );
 
@@ -230,16 +230,13 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 				mesh = new THREE.Mesh( geometry, material );
 				group.add( mesh );
 
-				var meshmaterials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } )
-				];
+				cube = new THREE.Mesh( smooth, smoothMaterial );
+				var wireframe = new THREE.Mesh( smooth, wireframeMaterial );
+				cube.add( wireframe );
 
-				cube = THREE.SceneUtils.createMultiMaterialObject( smooth, meshmaterials );
 				cube.scale.setScalar( params.meshScale ? params.meshScale : 1 );
 				scene.add( cube );
 

examples/webgl_multiple_canvases_circle.html

@@ -247,11 +247,11 @@
 
 				for ( var i = 0; i < noof_balls; i ++ ) { // create shadows
 
-					var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-					mesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i * 400;
-					mesh.position.y = - 250;
-					mesh.rotation.x = - Math.PI / 2;
-					scene.add( mesh );
+					var shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+					shadowMesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i * 400;
+					shadowMesh.position.y = - 250;
+					shadowMesh.rotation.x = - Math.PI / 2;
+					scene.add( shadowMesh );
 
 				}
 
@@ -283,17 +283,14 @@
 
 				}
 
-
-				var materials = [
-
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
-
-				];
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 				for ( var i = 0; i < noof_balls; i ++ ) { // create balls
 
-					var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry1, materials );
+					var mesh = new THREE.Mesh( geometry1, material );
+					var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+					mesh.add( wireframe );
 
 					mesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i *400;
 					mesh.rotation.x = i * 0.5;

examples/webgl_multiple_canvases_complex.html

@@ -151,23 +151,24 @@
 
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				var shadowMesh;
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = - 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = - 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
 				var faceIndices = [ 'a', 'b', 'c' ];
 
@@ -208,24 +209,28 @@
 
 				}
 
-				var materials = [
-
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
+				var mesh, wireframe;
 
-				];
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var group1 = THREE.SceneUtils.createMultiMaterialObject( geometry1, materials );
-				group1.position.x = -400;
-				group1.rotation.x = -1.87;
-				scene.add( group1 );
+				mesh = new THREE.Mesh( geometry1, material );
+				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = - 400;
+				mesh.rotation.x = - 1.87;
+				scene.add( mesh );
 
-				var group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
-				group2.position.x = 400;
-				scene.add( group2 );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = 400;
+				scene.add( mesh );
 
-				var group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
-				scene.add( group3 );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh.add( wireframe );
+				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_multiple_canvases_grid.html

@@ -169,22 +169,24 @@
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				var shadowMesh;
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = - 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = - 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
+
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
 				var faceIndices = [ 'a', 'b', 'c' ];
 
@@ -225,24 +227,28 @@
 
 				}
 
-				var materials = [
+				var mesh, wireframe;
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				];
-
-				var group1 = THREE.SceneUtils.createMultiMaterialObject( geometry1, materials );
-				group1.position.x = -400;
-				group1.rotation.x = -1.87;
-				scene.add( group1 );
+				mesh = new THREE.Mesh( geometry1, material );
+				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = - 400;
+				mesh.rotation.x = - 1.87;
+				scene.add( mesh );
 
-				var group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
-				group2.position.x = 400;
-				scene.add( group2 );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = 400;
+				scene.add( mesh );
 
-				var group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
-				scene.add( group3 );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh.add( wireframe );
+				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_multiple_renderers.html

@@ -42,7 +42,8 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var camera, scene, renderer1, renderer2;
-			var group1, group2, group3;
+
+			var mesh1, mesh2, mesh3;
 
 			init();
 			animate();
@@ -81,22 +82,24 @@
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				var shadowMesh;
+
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = - 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = - 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
-				var mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math.PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math.PI / 2;
+				scene.add( shadowMesh );
 
 				var faceIndices = [ 'a', 'b', 'c' ];
 
@@ -139,23 +142,28 @@
 
 				}
 
-				var materials = [
-
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
+				var wireframe;
 
-				];
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				group1 = THREE.SceneUtils.createMultiMaterialObject( geometry1, materials );
-				group1.position.x = -400;
-				scene.add( group1 );
+				mesh1 = new THREE.Mesh( geometry1, material );
+				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				mesh1.add( wireframe );
+				mesh1.position.x = - 400;
+				mesh1.rotation.x = - 1.87;
+				scene.add( mesh1 );
 
-				group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
-				group2.position.x = 400;
-				scene.add( group2 );
+				mesh2 = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh2.add( wireframe );
+				mesh2.position.x = 400;
+				scene.add( mesh2 );
 
-				group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
-				scene.add( group3 );
+				mesh3 = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh3.add( wireframe );
+				scene.add( mesh3 );
 
 				//
 
@@ -177,11 +185,11 @@
 
 				// update scene
 
-				group1.rotation.z += Math.PI / 500;
-				group2.rotation.z += Math.PI / 500;
-				group3.rotation.z += Math.PI / 500;
+				mesh1.rotation.z += Math.PI / 500;
+				mesh2.rotation.z += Math.PI / 500;
+				mesh3.rotation.z += Math.PI / 500;
 
-				var geometry = group3.children[ 0 ].geometry;
+				var geometry = mesh3.geometry;
 
 				for ( var i = 0; i < geometry.faces.length; i ++ ) {
 

examples/webgl_multiple_views.html

@@ -46,8 +46,6 @@
 
 			var views, scene, renderer;
 
-			var mesh, group1, group2, group3, light;
-
 			var mouseX = 0, mouseY = 0;
 
 			var windowWidth, windowHeight;
@@ -119,7 +117,7 @@
 
 				scene = new THREE.Scene();
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -142,22 +140,24 @@
 				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture, transparent: true } );
 				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math. PI / 2;
-				scene.add( mesh );
+				var shadowMesh;
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = - 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math. PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math. PI / 2;
+				scene.add( shadowMesh );
 
-				mesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-				mesh.position.x = 400;
-				mesh.position.y = - 250;
-				mesh.rotation.x = - Math. PI / 2;
-				scene.add( mesh );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = - 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math. PI / 2;
+				scene.add( shadowMesh );
+
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh.position.x = 400;
+				shadowMesh.position.y = - 250;
+				shadowMesh.rotation.x = - Math. PI / 2;
+				scene.add( shadowMesh );
 
 				var faceIndices = [ 'a', 'b', 'c' ];
 
@@ -200,28 +200,28 @@
 
 				}
 
+				var mesh, wireframe;
 
-				var materials = [
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } ),
-					new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
-
-				];
-
-				group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
-				group1.position.x = -400;
-				group1.rotation.x = -1.87;
-				scene.add( group1 );
+				mesh = new THREE.Mesh( geometry, material );
+				wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = - 400;
+				mesh.rotation.x = - 1.87;
+				scene.add( mesh );
 
-				group2 = THREE.SceneUtils.createMultiMaterialObject( geometry2, materials );
-				group2.position.x = 400;
-				group2.rotation.x = 0;
-				scene.add( group2 );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh.add( wireframe );
+				mesh.position.x = 400;
+				scene.add( mesh );
 
-				group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
-				group3.position.x = 0;
-				group3.rotation.x = 0;
-				scene.add( group3 );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh.add( wireframe );
+				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );