Merge pull request #14579 from WestLangley/dev-to_buffer_geometry_3

Examples: even more Geometry -> BufferGeometry

examples/canvas_geometry_terrain.html

@@ -71,17 +71,19 @@
 
 				var data = generateHeight( 1024, 1024 );
 				var texture = new THREE.CanvasTexture( generateTexture( data, 1024, 1024 ) );
-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
+				var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide, overdraw: 0.5 } );
 
 				var quality = 16, step = 1024 / quality;
 
-				var geometry = new THREE.PlaneGeometry( 2000, 2000, quality - 1, quality - 1 );
+				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000, quality - 1, quality - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
+				var positions = geometry.attributes.position;
+
+				for ( var i = 0, l = positions.count; i < l; i ++ ) {
 
 					var x = i % quality, y = Math.floor( i / quality );
-					geometry.vertices[ i ].y = data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128;
+					positions.setY( i, data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128 );
 
 				}
 
@@ -122,7 +124,7 @@
 			function generateHeight( width, height ) {
 
 				var data = new Uint8Array( width * height ), perlin = new ImprovedNoise(),
-				size = width * height, quality = 2, z = Math.random() * 100;
+					size = width * height, quality = 2, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
@@ -130,7 +132,7 @@
 
 					for ( var i = 0; i < size; i ++ ) {
 
-						var x = i % width, y = ~~ ( i / width );
+						var x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * 0.5 ) * quality + 10;
 
 					}
@@ -144,7 +146,7 @@
 			function generateTexture( data, width, height ) {
 
 				var canvas, context, image, imageData,
-				level, diff, vector3, sun, shade;
+					level, diff, vector3, sun, shade;
 
 				vector3 = new THREE.Vector3( 0, 0, 0 );
 
@@ -162,7 +164,7 @@
 				image = context.getImageData( 0, 0, width, height );
 				imageData = image.data;
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++  ) {
+				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
 					vector3.x = data[ j - 1 ] - data[ j + 1 ];
 					vector3.y = 2;
@@ -183,7 +185,7 @@
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
@@ -211,7 +213,6 @@
 
 			}
 
-
 		</script>
 
 	</body>

examples/canvas_lines_sphere.html

@@ -26,29 +26,28 @@
 		<script>
 
 			var SCREEN_WIDTH = window.innerWidth,
-			SCREEN_HEIGHT = window.innerHeight,
+				SCREEN_HEIGHT = window.innerHeight,
 
-			mouseX = 0, mouseY = 0,
+				mouseX = 0, mouseY = 0,
 
-			windowHalfX = window.innerWidth / 2,
-			windowHalfY = window.innerHeight / 2,
+				windowHalfX = window.innerWidth / 2,
+				windowHalfY = window.innerHeight / 2,
 
-			SEPARATION = 200,
-			AMOUNTX = 10,
-			AMOUNTY = 10,
+				SEPARATION = 200,
+				AMOUNTX = 10,
+				AMOUNTY = 10,
 
-			camera, scene, renderer;
+				camera, scene, renderer;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container, separation = 100, amountX = 50, amountY = 50,
-				particles, particle;
+				var container, separation = 100, amountX = 50, amountY = 50, particles, particle;
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.z = 1000;
@@ -83,7 +82,7 @@
 					particle.position.y = Math.random() * 2 - 1;
 					particle.position.z = Math.random() * 2 - 1;
 					particle.position.normalize();
-					particle.position.multiplyScalar( Math.random() * 10 + 450 );
+					particle.position.multiplyScalar( 450 );
 					particle.scale.multiplyScalar( 2 );
 					scene.add( particle );
 
@@ -91,25 +90,28 @@
 
 				// lines
 
-				for (var i = 0; i < 300; i++) {
+				var vertices = [];
 
-					var geometry = new THREE.Geometry();
+				for ( var i = 0; i < 300; i ++ ) {
 
 					var vertex = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 					vertex.normalize();
 					vertex.multiplyScalar( 450 );
 
-					geometry.vertices.push( vertex );
+					vertices.push( vertex );
 
 					var vertex2 = vertex.clone();
 					vertex2.multiplyScalar( Math.random() * 0.3 + 1 );
 
-					geometry.vertices.push( vertex2 );
+					vertices.push( vertex2 );
 
-					var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: Math.random() } ) );
-					scene.add( line );
 				}
 
+				var geometry = new THREE.BufferGeometry().setFromPoints( vertices );
+
+				var line = new THREE.LineSegments( geometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
+				scene.add( line );
+
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -134,10 +136,11 @@
 
 			//
 
-			function onDocumentMouseMove(event) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
+
 			}
 
 			function onDocumentTouchStart( event ) {