starting to extrude planes

assets/www/index.html

@@ -66,7 +66,7 @@ This three.js demo is part of a collection at
 	var container, scene, camera, renderer, controls, stats, light, sunLight, lineSun, spriteSun, contextSun, contextEarth, lineEarth, spriteEarth, spriteInclination, contextInclination;
 	//var keyboard = new THREEx.KeyboardState();
 	var clock = new THREE.Clock();
-	var sun, sunGlow, earth, spacecraft, arrow_vel, arrow_accel, arrow_momentum, target_a, vector_a, direction_a, plane_orb, incl_arc;
+	var sun, sunGlow, earth, spacecraft, arrow_vel, arrow_accel, arrow_momentum, target_a, vector_a, direction_a, plane_orb, incl_arc, incl_offset;
 	var origin = new THREE.Vector3(0,0,0);
 	var fontsizeSun, borderColorSun, borderThicknessSun, backgroundColorSun, fontColorSun, mat_arc;
 	var fontsizeEarth, borderColorEarth, borderThicknessEarth, backgroundColorEarth, fontColorEarth;
@@ -74,6 +74,7 @@ This three.js demo is part of a collection at
 	var fps_update_counter = 0;
 	var miniSphereX,miniSphereXX,miniSphereY,miniSphereYY,miniSphereZ,miniSphereZZ;
 	var gui, parameters;
+	var axis_x = new THREE.Vector3(1,0,0);
 	
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			SCENE PARAMS (Hard-coded parameters)

assets/www/init.js

@@ -291,7 +291,28 @@ function init()
 
 		//Orbital plane
 		var material_plane_orb = new THREE.MeshPhongMaterial({color: plane_orb_color, transparent: true/*, depthWrite: false, depthTest: false, alphaTest: 0.1*/, opacity: 0.2, side: THREE.DoubleSide });
-		plane_orb = new THREE.Mesh( new THREE.RingGeometry( sphere_radius, planes_width, plane_theta_seg, plane_phi_seg, 0, Math.PI * 2 ), material_plane_orb );
+		var ring_geom = new THREE.RingGeometry( sphere_radius, planes_width, plane_theta_seg, plane_phi_seg, 0, Math.PI * 2 )
+		plane_orb = new THREE.Mesh( ring_geom, material_plane_orb );
+		
+		/*var vertices = [];
+		for (var i = 0; i < ring_geom.vertices.length ; i++) {
+			vertices.push(ring_geom.vertices[i].clone());		
+		}
+		var orb_plane_shape = new THREE.Shape(vertices);
+		// extrude options
+		var options = { 
+			amount: 1,              // default 100, only used when path is null
+			bevelEnabled: false, 
+			bevelSegments: 2, 
+			steps: 1,                // default 1, try 3 if path defined
+			extrudePath: null        // or path
+		};
+		    
+		// geometry
+		var geometry = new THREE.ExtrudeGeometry( orb_plane_shape, options );
+		    
+		plane_orb = new THREE.Mesh(geometry, material_plane_orb);
+*/
 		plane_orb.position.set( 0, 0, 0 );
 
 		//Compute inclination quaternion
@@ -317,7 +338,9 @@ function init()
 			mat_arc = new THREE.MeshPhongMaterial( { color: 0xFFFF00, metal: true, transparent: false, opacity: 1.0, side: THREE.BackSide } );
 			incl_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_radius, arc_tube, arc_seg_r, arc_seg_t, inclination ), mat_arc );
 			incl_arc.position.set( 0, 0, 0 );
-			//incl_arc.rotation.y = Math.PI/2;
+
+			//Used for update()
+			incl_offset = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( -1, 0, 0 ),Math.PI/2);
 
 
 			//Sprite

assets/www/update.js

@@ -90,62 +90,14 @@ function update()
 
 		//Rotate orbital plane
 		plane_orb.quaternion.copy(incl_quat);
-		plane_orb.matrixWorldNeedsUpdate = true;
-		plane_orb.updateMatrix();
 
 		if(show_inclination){
 			//Compute instant inclination angle
 			var inclination = Math.asin(value_earth.z/value_earth.length());
-			//console.debug(inclination);
 
-			//Compute arc angle clip points
-			//var clip1 = value_earth.clone().normalize().multiplyScalar(sphere_radius);
-			//var clip2 = value_earth.clone().setZ(0).normalize().multiplyScalar(sphere_radius);
-
-			//Draw Arc
-			//incl_arc.rotation.x = Math.PI/2;
-			scene.remove(incl_arc);
-			incl_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_radius, arc_tube, arc_seg_r, arc_seg_t, inclination ), mat_arc );
-			incl_arc.position.set( 0, 0, 0 );
-			
-
-			var incl_offset = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( -1, 0, 0 ),Math.PI/2);
-
-			var axis_z = new THREE.Vector3(1,0,0);
-
-			var incl_inst_rot = new THREE.Quaternion().setFromUnitVectors( axis_z, value_earth.clone().normalize() );
-
-			incl_arc.quaternion.copy(incl_inst_rot.multiply(incl_offset));
-			incl_arc.matrixWorldNeedsUpdate = true;
-			incl_arc.updateMatrix();
-
-			scene.add(incl_arc);
-
-
-
-			//Update Sprite
-			var messageInclination = " "+parseFloat(Math.round(inclination * 180) / Math.PI).toFixed(1)+"º ";
-			contextInclination.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
-			contextInclination.fill(); // FILL THE CONTEXT
-			// get size data (height depends only on font size)
-			var metricsInclination = contextInclination.measureText( messageInclination );
-			var textWidthInclination = metricsInclination.width;
-			// background color
-			contextInclination.fillStyle   = "rgba(" + backgroundColorInclination.r + "," + backgroundColorInclination.g + ","
-										  + backgroundColorInclination.b + "," + backgroundColorInclination.a + ")";
-			// border color
-			contextInclination.strokeStyle = "rgba(" + borderColorInclination.r + "," + borderColorInclination.g + ","
-										  + borderColorInclination.b + "," + borderColorInclination.a + ")";
-			contextInclination.lineWidth = borderThicknessInclination;
-			roundRect(contextInclination, borderThicknessInclination/2, borderThicknessInclination/2, textWidthInclination + borderThicknessInclination, fontsizeInclination * 1.4 + borderThicknessInclination, 6);
-			// 1.4 is extra height factor for text below baseline: g,j,p,q.
-			// text color
-			contextInclination.fillStyle   = "rgba(" + fontColorInclination.r + "," + fontColorInclination.g + ","
-										  + fontColorInclination.b + "," + fontColorInclination.a + ")";
-			contextInclination.fillText( messageInclination, borderThicknessInclination, fontsizeInclination + borderThicknessInclination);
-			spriteInclination.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
-			spriteInclination.position = value_earth.clone().setZ(0).normalize().multiplyScalar(arc_sprite_radius);
+			updateInclinationArc(inclination);
 
+			updateInclinationSprite(inclination);
 		}
 	}
 	//-----------------------------------------------------------------------------------------------------------------------
@@ -284,3 +236,42 @@ function update()
 	}
 
 }
+function updateInclinationSprite(inclination){
+	//Update Sprite
+	var messageInclination = " i="+parseFloat(Math.round(inclination * 180) / Math.PI).toFixed(1)+"º ";
+	contextInclination.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
+	contextInclination.fill(); // FILL THE CONTEXT
+	// get size data (height depends only on font size)
+	var metricsInclination = contextInclination.measureText( messageInclination );
+	var textWidthInclination = metricsInclination.width;
+	// background color
+	contextInclination.fillStyle   = "rgba(" + backgroundColorInclination.r + "," + backgroundColorInclination.g + ","
+								  + backgroundColorInclination.b + "," + backgroundColorInclination.a + ")";
+	// border color
+	contextInclination.strokeStyle = "rgba(" + borderColorInclination.r + "," + borderColorInclination.g + ","
+								  + borderColorInclination.b + "," + borderColorInclination.a + ")";
+	contextInclination.lineWidth = borderThicknessInclination;
+	roundRect(contextInclination, borderThicknessInclination/2, borderThicknessInclination/2, textWidthInclination + borderThicknessInclination, fontsizeInclination * 1.4 + borderThicknessInclination, 6);
+	// 1.4 is extra height factor for text below baseline: g,j,p,q.
+	// text color
+	contextInclination.fillStyle   = "rgba(" + fontColorInclination.r + "," + fontColorInclination.g + ","
+								  + fontColorInclination.b + "," + fontColorInclination.a + ")";
+	contextInclination.fillText( messageInclination, borderThicknessInclination, fontsizeInclination + borderThicknessInclination);
+	spriteInclination.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
+	spriteInclination.position = value_earth.clone().setZ(0).normalize().multiplyScalar(arc_sprite_radius);
+}
+function updateInclinationArc(inclination){
+	//ReDraw Arc
+	scene.remove(incl_arc);
+
+	incl_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_radius, arc_tube, arc_seg_r, arc_seg_t, inclination ), mat_arc );
+	//incl_arc.position.set( 0, 0, 0 );
+
+	var incl_inst_rot = new THREE.Quaternion().setFromUnitVectors( axis_x, value_earth.clone().normalize() );
+
+	incl_arc.quaternion.copy(incl_inst_rot.multiply(incl_offset));
+	//incl_arc.matrixWorldNeedsUpdate = true;
+	//incl_arc.updateMatrix();
+
+	scene.add(incl_arc);
+}

src/app/Parameters.java

@@ -25,7 +25,7 @@ public class Parameters {
 	}
 	public static class Web {
 		public static final String STARTING_PAGE = "file:///android_asset/www/index.html";
-		//public static final String STARTING_PAGE = "http://threejs.org/examples/misc_controls_trackball.html";
+		//public static final String STARTING_PAGE = "http://stemkoski.github.io/Three.js/Labeled-Geometry.html";
 		public static final String TEST_PAGE_1 = "http://get.webgl.org/";
 		public static final String TEST_PAGE_2 = "http://doesmybrowsersupportwebgl.com/";
 		public static final String TEST_PAGE_3 = "http://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html";