Merge pull request #5645 from WestLangley/dev-cleanup

Code Cleanup

examples/webgl_geometry_shapes.html

@@ -24,7 +24,7 @@
 
 			var camera, scene, renderer;
 
-			var group, text, plane;
+			var group;
 
 			var targetRotation = 0;
 			var targetRotationOnMouseDown = 0;
@@ -48,17 +48,17 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
+				info.innerHTML = 'Simple procedurally generated 3D shapes<br/>Drag to spin';
 				container.appendChild( info );
 
+				scene = new THREE.Scene();
+
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 150, 500 );
+				scene.add( camera );
 
-				scene = new THREE.Scene();
-
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 );
-				scene.add( light );
+				var light = new THREE.PointLight( 0xffffff, 0.8 );
+				camera.add( light );
 
 				group = new THREE.Group();
 				group.position.y = 50;
@@ -67,13 +67,13 @@
 				function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
 
 					var points = shape.createPointsGeometry();
-					var spacedPoints = shape.createSpacedPointsGeometry( 100 );
+					var spacedPoints = shape.createSpacedPointsGeometry( 50 );
 
 					// flat shape
 
 					var geometry = new THREE.ShapeGeometry( shape );
 
-					var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
+					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, ambient: color, side: THREE.DoubleSide } ) );
 					mesh.position.set( x, y, z - 125 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -83,7 +83,7 @@
 
 					var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
 
-					var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
+					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, ambient: color } ) );
 					mesh.position.set( x, y, z - 75 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -91,16 +91,8 @@
 
 					// solid line
 
-					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 2 } ) );
-					line.position.set( x, y, z + 25 );
-					line.rotation.set( rx, ry, rz );
-					line.scale.set( s, s, s );
-					group.add( line );
-
-					// transparent line from real points
-
-					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, opacity: 0.5 } ) );
-					line.position.set( x, y, z + 75 );
+					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
+					line.position.set( x, y, z - 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
 					group.add( line );
@@ -108,16 +100,16 @@
 					// vertices from real points
 
 					var pgeo = points.clone();
-					var particles = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 2, opacity: 0.75 } ) );
-					particles.position.set( x, y, z + 75 );
+					var particles = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 4 } ) );
+					particles.position.set( x, y, z + 25 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
 					group.add( particles );
 
-					// transparent line from equidistance sampled points
+					// line from equidistance sampled points
 
-					var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, opacity: 0.2 } ) );
-					line.position.set( x, y, z + 125 );
+					var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
+					line.position.set( x, y, z + 75 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
 					group.add( line );
@@ -125,7 +117,7 @@
 					// equidistance sampled points
 
 					var pgeo = spacedPoints.clone();
-					var particles2 = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 2, opacity: 0.5 } ) );
+					var particles2 = new THREE.PointCloud( pgeo, new THREE.PointCloudMaterial( { color: color, size: 4 } ) );
 					particles2.position.set( x, y, z + 125 );
 					particles2.rotation.set( rx, ry, rz );
 					particles2.scale.set( s, s, s );
@@ -161,6 +153,8 @@
 				californiaPts.push( new THREE.Vector2 ( 600, 370 ) );
 				californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
 
+				for( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
+
 				var californiaShape = new THREE.Shape( californiaPts );
 
 
@@ -231,6 +225,17 @@
 				} )( roundedRectShape, 0, 0, 50, 50, 20 );
 
 
+				// Track
+
+				var trackShape = new THREE.Shape();
+
+				trackShape.moveTo( 40, 40 );
+				trackShape.lineTo( 40, 160 );
+				trackShape.absarc( 60, 160, 20, Math.PI, 0, true );
+				trackShape.lineTo( 80, 40 );
+				trackShape.absarc( 60, 40, 20, 2 * Math.PI, Math.PI, true );
+
+
 				// Circle
 
 				var circleRadius = 40;
@@ -244,7 +249,7 @@
 
 				// Fish
 
-				x = y = 0;
+				var x = y = 0;
 
 				var fishShape = new THREE.Shape();
 
@@ -276,7 +281,6 @@
 
 				var smileyEye1Path = new THREE.Path();
 				smileyEye1Path.moveTo( 35, 20 );
-				// smileyEye1Path.absarc( 25, 20, 10, 0, Math.PI*2, true );
 				smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI*2, true );
 
 				smileyShape.holes.push( smileyEye1Path );
@@ -287,13 +291,6 @@
 				smileyShape.holes.push( smileyEye2Path );
 
 				var smileyMouthPath = new THREE.Path();
-				// ugly box mouth
-				// smileyMouthPath.moveTo( 20, 40 );
-				// smileyMouthPath.lineTo( 60, 40 );
-				// smileyMouthPath.lineTo( 60, 60 );
-				// smileyMouthPath.lineTo( 20, 60 );
-				// smileyMouthPath.lineTo( 20, 40 );
-
 				smileyMouthPath.moveTo( 20, 40 );
 				smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
 				smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
@@ -303,56 +300,38 @@
 				smileyShape.holes.push( smileyMouthPath );
 
 
-				// Spline shape + path extrusion
+				// Spline shape
 
 				var splinepts = [];
-				splinepts.push( new THREE.Vector2 ( 350, 100 ) );
-				splinepts.push( new THREE.Vector2 ( 400, 450 ) );
-				splinepts.push( new THREE.Vector2 ( -140, 350 ) );
+				splinepts.push( new THREE.Vector2 ( 70, 20 ) );
+				splinepts.push( new THREE.Vector2 ( 80, 90 ) );
+				splinepts.push( new THREE.Vector2 ( -30, 70 ) );
 				splinepts.push( new THREE.Vector2 ( 0, 0 ) );
 
 				var splineShape = new THREE.Shape();
 				splineShape.moveTo( 0, 0 );
 				splineShape.splineThru( splinepts );
 
-				// TODO 3d path?
-
-				var apath = new THREE.SplineCurve3();
-				apath.points.push(new THREE.Vector3(-50, 150, 10));
-				apath.points.push(new THREE.Vector3(-20, 180, 20));
-				apath.points.push(new THREE.Vector3(40, 220, 50));
-				apath.points.push(new THREE.Vector3(200, 290, 100));
-
-
-				var extrudeSettings = { amount: 20 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5
+				var extrudeSettings = { amount: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
 
 				// addShape( shape, color, x, y, z, rx, ry,rz, s );
 
-				addShape( californiaShape, extrudeSettings, 0xffaa00, -300, -100, 0, 0, 0, 0, 0.25 );
-
-				extrudeSettings.bevelEnabled = true;
-				extrudeSettings.bevelSegments = 2;
-				extrudeSettings.steps = 2;
-
-				addShape( triangleShape, extrudeSettings, 0xffee00, -180, 0, 0, 0, 0, 0, 1 );
-				addShape( roundedRectShape, extrudeSettings, 0x005500, -150, 150, 0, 0, 0, 0, 1 );
-				addShape( squareShape, extrudeSettings, 0x0055ff, 150, 100, 0, 0, 0, 0, 1 );
-				addShape( heartShape, extrudeSettings, 0xff1100, 60, 100, 0, 0, 0, Math.PI, 1 );
-				addShape( circleShape, extrudeSettings, 0x00ff11, 120, 250, 0, 0, 0, 0, 1 );
-				addShape( fishShape, extrudeSettings, 0x222222, -60, 200, 0, 0, 0, 0, 1 );
-				addShape( smileyShape, extrudeSettings, 0xee00ff, -200, 250, 0, 0, 0, Math.PI, 1 );
-				addShape( arcShape, extrudeSettings, 0xbb4422, 150, 0, 0, 0, 0, 0, 1 );
-
-				extrudeSettings.extrudePath = apath;
-				extrudeSettings.bevelEnabled = false;
-				extrudeSettings.steps = 20;
-
-				addShape( splineShape, extrudeSettings, 0x888888, -50, -100, -50, 0, 0, 0, 0.2 );
+				addShape( californiaShape,  extrudeSettings, 0xf08000, -300, -100, 0, 0, 0, 0, 1 );
+				addShape( triangleShape,    extrudeSettings, 0x8080f0, -180,    0, 0, 0, 0, 0, 1 );
+				addShape( roundedRectShape, extrudeSettings, 0x008000, -150,  150, 0, 0, 0, 0, 1 );
+				addShape( trackShape,       extrudeSettings, 0x008080,  200, -100, 0, 0, 0, 0, 1 );
+				addShape( squareShape,      extrudeSettings, 0x0040f0,  150,  100, 0, 0, 0, 0, 1 );
+				addShape( heartShape,       extrudeSettings, 0xf00000,   60,  100, 0, 0, 0, Math.PI, 1 );
+				addShape( circleShape,      extrudeSettings, 0x00f000,  120,  250, 0, 0, 0, 0, 1 );
+				addShape( fishShape,        extrudeSettings, 0x404040,  -60,  200, 0, 0, 0, 0, 1 );
+				addShape( smileyShape,      extrudeSettings, 0xf000f0, -200,  250, 0, 0, 0, Math.PI, 1 );
+				addShape( arcShape,         extrudeSettings, 0x804000,  150,    0, 0, 0, 0, 0, 1 );
+				addShape( splineShape,      extrudeSettings, 0x808080,  -50, -100, 0, 0, 0, 0, 1 );
 
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setClearColor( 0xf0f0f0 );
+				renderer.setClearColor( 0xf0f0f0, 1 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );