Merge pull request #13822 from Mugen87/dev4

Examples: More clean up

Author: mrdoob

examples/canvas_lines_colors.html

@@ -50,73 +50,82 @@
 		<script src="js/renderers/CanvasRenderer.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 		<script src="js/geometries/hilbert3D.js"></script>
+		<script src="js/geometries/hilbert2D.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+			var mouseX = 0, mouseY = 0;
 
-			var mouseX = 0, mouseY = 0,
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
 
-			windowHalfX = window.innerWidth / 2,
-			windowHalfY = window.innerHeight / 2,
-
-			camera, scene, renderer, material;
+			var camera, scene, renderer;
 
 			init();
 			animate();
 
 			function init() {
 
-				var i, container;
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 700;
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
 				renderer = new THREE.CanvasRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
+
+				// 2d lines
+
+				var geometry2 = new THREE.Geometry(),
+					points = hilbert2D( new THREE.Vector3( 0, 0, 0 ), 400, 4 ),
+					colors2 = [];
+
+				for ( i = 0; i < points.length; i ++ ) {
+
+					geometry2.vertices.push( points[ i ] );
+
+					colors2[ i ] = new THREE.Color( 0xffffff );
+					colors2[ i ].setHSL( i / points.length, 1, 0.5 );
+
+				}
+
+				geometry2.colors = colors2;
+
+				// 3d lines
 
 				var geometry3 = new THREE.Geometry(),
-					points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
+					points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
 					colors3 = [];
 
 				for ( i = 0; i < points.length; i ++ ) {
 
 					geometry3.vertices.push( points[ i ] );
 
 					colors3[ i ] = new THREE.Color( 0xffffff );
-					colors3[ i ].setHSL( i / points.length, 1.0, 0.5 );
+					colors3[ i ].setHSL( i / points.length, 1, 0.5 );
 
 				}
 
 				geometry3.colors = colors3;
 
 				// lines
 
-				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
-
-				var line, p, scale = 0.3, d = 225;
-
-				line = new THREE.Line(geometry3, material );
-				line.scale.x = line.scale.y = line.scale.z =  scale*1.5;
-				line.position.x = 0;
-				line.position.y = 0;
-				line.position.z = 0;
-				scene.add( line );
+				var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 3, vertexColors: THREE.VertexColors } );
 
-				//
+				var line3d = new THREE.Line( geometry3, material );
+				line3d.scale.set( 0.4, 0.4, 0.4 );
+				line3d.position.set( 200, 0, 0 );
+				scene.add( line3d );
 
-				stats = new Stats();
-				//container.appendChild( stats.dom );
+				var line2d = new THREE.Line( geometry2, material );
+				line2d.scale.copy( line3d.scale );
+				line2d.position.set( - 200, 0, 0 );
+				scene.add( line2d );
 
 				//
 
@@ -183,14 +192,12 @@
 				requestAnimationFrame( animate );
 				render();
 
-				stats.update();
-
 			}
 
 			function render() {
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
+				camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05;
 
 				camera.lookAt( scene.position );
 
@@ -199,11 +206,16 @@
 				for ( var i = 0; i < scene.children.length; i ++ ) {
 
 					var object = scene.children[ i ];
-					if ( object instanceof THREE.Line ) object.rotation.y = time * ( i % 2 ? 1 : -1 );
+
+					if ( object.isLine ) {
+
+						object.rotation.y = time * ( i % 2 ? 1 : -1 );
+
+					}
 
 				}
 
-				renderer.render(scene, camera );
+				renderer.render( scene, camera );
 
 			}
 

examples/canvas_lines_colors_2d.html

@@ -374,7 +374,6 @@ var files = {
 		"canvas_lights_pointlights",
 		"canvas_lines",
 		"canvas_lines_colors",
-		"canvas_lines_colors_2d",
 		"canvas_lines_dashed",
 		"canvas_lines_sphere",
 		"canvas_materials",