Merge pull request #13933 from Mugen87/dev11

Examples: Clean up

examples/webgl_buffergeometry_drawcalls.html

@@ -106,7 +106,7 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxGeometry( r, r, r ) ) );
+				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 				helper.material.color.setHex( 0x080808 );
 				helper.material.blending = THREE.AdditiveBlending;
 				helper.material.transparent = true;

examples/webgl_effects_peppersghost.html

@@ -71,17 +71,36 @@
 
 				// Cube
 
-				var geometry = new THREE.BoxGeometry( 1, 1, 1 );
+				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
-				for ( var i = 0; i < geometry.faces.length; i += 2 ) {
+				var position = geometry.attributes.position;
+				var colors = [];
+				var color = new THREE.Color();
 
-						var hex = Math.random() * 0xffffff;
-						geometry.faces[ i ].color.setHex( hex );
-						geometry.faces[ i + 1 ].color.setHex( hex );
+				// generate for each side of the cube a different color
+
+				for ( var i = 0; i < position.count; i += 6 ) {
+
+					color.setHex( Math.random() * 0xffffff );
+
+					// first face
+
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+
+					// second face
+
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, overdraw: 0.5 } );
 
 				for ( var i = 0; i < 10; i ++ ) {
 

examples/webgl_lines_sphere.html

@@ -69,11 +69,6 @@
 
 			function init() {
 
-				var container;
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 				camera.position.z = 1000;
 
@@ -93,7 +88,7 @@
 
 					line = new THREE.LineSegments( geometry, material );
 					line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
-					line.originalScale = p[ 0 ];
+					line.userData.originalScale = p[ 0 ];
 					line.rotation.y = Math.random() * Math.PI;
 					line.updateMatrix();
 					scene.add( line );
@@ -103,7 +98,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -121,7 +116,7 @@
 
 					scene.traverse( function ( object ) {
 
-						if ( object instanceof THREE.Line ) {
+						if ( object.isLine ) {
 
 							object.geometry.dispose();
 							object.geometry = geometry;
@@ -136,25 +131,29 @@
 
 			function createGeometry() {
 
-				var geometry = new THREE.Geometry();
+				var geometry = new THREE.BufferGeometry();
+				var vertices = [];
+
+				var vertex = new THREE.Vector3();
 
 				for ( var i = 0; i < 1500; i ++ ) {
 
-					var vertex1 = new THREE.Vector3();
-					vertex1.x = Math.random() * 2 - 1;
-					vertex1.y = Math.random() * 2 - 1;
-					vertex1.z = Math.random() * 2 - 1;
-					vertex1.normalize();
-					vertex1.multiplyScalar( r );
+					vertex.x = Math.random() * 2 - 1;
+					vertex.y = Math.random() * 2 - 1;
+					vertex.z = Math.random() * 2 - 1;
+					vertex.normalize();
+					vertex.multiplyScalar( r );
 
-					var vertex2 = vertex1.clone();
-					vertex2.multiplyScalar( Math.random() * 0.09 + 1 );
+					vertices.push( vertex.x, vertex.y, vertex.z );
 
-					geometry.vertices.push( vertex1 );
-					geometry.vertices.push( vertex2 );
+					vertex.multiplyScalar( Math.random() * 0.09 + 1 );
+
+					vertices.push( vertex.x, vertex.y, vertex.z );
 
 				}
 
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
 				return geometry;
 
 			}
@@ -227,11 +226,17 @@
 
 					var object = scene.children[ i ];
 
-					if ( object instanceof THREE.Line ) {
+					if ( object.isLine ) {
 
 						object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );
 
-						if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );
+						if ( i < 5 ) {
+
+							var scale = object.userData.originalScale * ( i / 5 + 1 ) * ( 1 + 0.5 * Math.sin( 7 * time ) );
+
+							object.scale.x = object.scale.y = object.scale.z = scale;
+
+						}
 
 					}
 

examples/webgl_loader_nrrd.html

@@ -112,8 +112,8 @@
 						sliceX;
 
 					//box helper to see the extend of the volume
-					var geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
-					var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
+					var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+					var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 					var cube = new THREE.Mesh( geometry, material );
 					cube.visible = false;
 					var box = new THREE.BoxHelper( cube );

examples/webgl_loader_obj2_meshspray.html

@@ -426,7 +426,7 @@
 					var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
 					this.scene.add( helper );
 
-					var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+					var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 					var material = new THREE.MeshNormalMaterial();
 					this.cube = new THREE.Mesh( geometry, material );
 					this.cube.position.set( 0, 0, 0 );

examples/webgl_loader_obj2_options.html

@@ -142,7 +142,7 @@
 					var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
 					this.scene.add( helper );
 
-					var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+					var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 					var material = new THREE.MeshNormalMaterial();
 					this.cube = new THREE.Mesh( geometry, material );
 					this.cube.position.set( 0, 0, 0 );

examples/webgl_loader_obj2_run_director.html

@@ -154,7 +154,7 @@
 					this.scene.add( directionalLight2 );
 					this.scene.add( ambientLight );
 
-					var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+					var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 					var material = new THREE.MeshNormalMaterial();
 					this.cube = new THREE.Mesh( geometry, material );
 					this.cube.position.set( 0, 0, 0 );