Merge pull request #7676 from WestLangley/dev-shapes

Fix closed curves and clean up

examples/webgl_geometry_shapes.html

@@ -48,7 +48,7 @@
 				info.style.top = '10px';
 				info.style.width = '100%';
 				info.style.textAlign = 'center';
-				info.innerHTML = 'Simple procedurally generated 3D shapes<br/>Drag to spin';
+				info.innerHTML = 'Simple procedurally-generated shapes<br/>Drag to spin';
 				container.appendChild( info );
 
 				scene = new THREE.Scene();
@@ -64,15 +64,13 @@
 				group.position.y = 50;
 				scene.add( group );
 
-				var texture = THREE.ImageUtils.loadTexture( "textures/UV_Grid_Sm.jpg" );
+				var loader = new THREE.TextureLoader();
+				var texture = loader.load( "textures/UV_Grid_Sm.jpg" );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 0.008, 0.008 );
 
 				function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
 
-					var points = shape.createPointsGeometry();
-					var spacedPoints = shape.createSpacedPointsGeometry( 50 );
-
 					// flat shape with texture
 					// note: default UVs generated by ShapeGemoetry are simply the x- and y-coordinates of the vertices
 
@@ -94,7 +92,7 @@
 					mesh.scale.set( s, s, s );
 					group.add( mesh );
 
-					// 3d shape
+					// extruded shape
 
 					var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
 
@@ -104,6 +102,12 @@
 					mesh.scale.set( s, s, s );
 					group.add( mesh );
 
+					// lines
+
+					shape.autoClose = true;
+					var points = shape.createPointsGeometry();
+					var spacedPoints = shape.createSpacedPointsGeometry( 50 );
+
 					// solid line
 
 					var line = new THREE.Line( points, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
@@ -112,31 +116,29 @@
 					line.scale.set( s, s, s );
 					group.add( line );
 
-					// vertices from real points
-
-					var pgeo = points.clone();
-					var particles = new THREE.Points( pgeo, new THREE.PointsMaterial( { 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 );
-
 					// line from equidistance sampled points
 
 					var line = new THREE.Line( spacedPoints, new THREE.LineBasicMaterial( { color: color, linewidth: 3 } ) );
-					line.position.set( x, y, z + 75 );
+					line.position.set( x, y, z + 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
 					group.add( line );
 
+					// vertices from real points
+
+					var particles = new THREE.Points( points, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					particles.position.set( x, y, z + 75 );
+					particles.rotation.set( rx, ry, rz );
+					particles.scale.set( s, s, s );
+					group.add( particles );
+
 					// equidistance sampled points
 
-					var pgeo = spacedPoints.clone();
-					var particles2 = new THREE.Points( pgeo, new THREE.PointsMaterial( { color: color, size: 4 } ) );
-					particles2.position.set( x, y, z + 125 );
-					particles2.rotation.set( rx, ry, rz );
-					particles2.scale.set( s, s, s );
-					group.add( particles2 );
+					var particles = new THREE.Points( spacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					particles.position.set( x, y, z + 125 );
+					particles.rotation.set( rx, ry, rz );
+					particles.scale.set( s, s, s );
+					group.add( particles );
 
 				}