bugfixes of model and spherical coordinates implemented

assets/www/index.html

@@ -55,22 +55,28 @@ This three.js demo is part of a collection at
 <!--<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />-->
 
 <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
-<!--<div id="SimulatorTop">TEST</div>
-<div id="SimulatorBottom">TEST2</div>-->
 <script>
 	// MAIN
 	//***********************************************************************************************************************
 	//		GLOBAL VARIABLES
 	//***********************************************************************************************************************
 	setLoadingProgress(5);
-	var container, scene, camera, renderer, controls, stats, light, sunLight, lineSun, spriteSun, contextSun, contextEarth, lineEarth, spriteEarth, spriteInclination, contextInclination;
+	var container, scene, camera, renderer, controls, stats, light;
+	var sun, sunGlow, sunLight, lineSun, spriteSun, contextSun;
+	var earth, contextEarth, lineEarth, spriteEarth;
+	var plane_orb, incl_arc, incl_offset, 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, incl_offset;
+	var spacecraft, arrow_vel, arrow_accel, arrow_momentum, target_a, vector_a, direction_a;
+	var long_arc, lat_arc, long_sprite, lat_sprite, lat_offset;
 	var origin = new THREE.Vector3(0,0,0);
+
 	var fontsizeSun, borderColorSun, borderThicknessSun, backgroundColorSun, fontColorSun, mat_arc;
 	var fontsizeEarth, borderColorEarth, borderThicknessEarth, backgroundColorEarth, fontColorEarth;
 	var fontsizeInclination, borderColorInclination, borderThicknessInclination, backgroundColorInclination, fontColorInclination;
+	var fontsizeLongitude, borderColorLongitude, borderThicknessLongitude, backgroundColorLongitude, fontColorLongitude;
+	var fontsizeLatitude, borderColorLatitude, borderThicknessLatitude, backgroundColorLatitude, fontColorLatitude;
+
 	var fps_update_counter = 0;
 	var miniSphereX,miniSphereXX,miniSphereY,miniSphereYY,miniSphereZ,miniSphereZZ;
 	var gui, parameters;
@@ -127,8 +133,10 @@ This three.js demo is part of a collection at
 	var plane_phi_seg = 10;
 
 	var arc_radius = sphere_radius+earth_radius*2;
+	var arc_sphcoord_radius = 3*sphere_radius/4;
 	var arc_sprite_radius = arc_radius+3;
 	var arc_tube = 0.5;
+	var arc_color = 0xFFFF00;
 	
 	var arrow_head_length = 9;
 	var arrow_head_width = 5;
@@ -160,10 +168,22 @@ This three.js demo is part of a collection at
 	var show_axis = true;
 	var show_axis_labels = true;
 
-	var show_planes = true;
+
+
+	var show_planes = false;//XGGDEBUG in android also false
+
+	var show_orbital_plane = false;
 	var plane_xy_color = 0xFF0000;
 	var plane_orb_color = 0x00FF00;
 	var show_inclination = true;// depends on show_planes, called: show orbit-xy planes //XGGDEBUG: add these preferences in android
+
+	var show_spheric_coords = true;
+	var spheric_coords_selection = "Earth";//Any of the basic indicators except for the attitude
+
+	var show_vectors_angle = true;
+	var vectors_angle_sel1 = "Earth"
+	var vectors_angle_sel2 = "Velocity"
+
 	
 	var show_spacecraft = true;//If set to false, instead of a S/C it will be a miniSphere in the reference position.
 	var show_sc_axis = true;

assets/www/init.js

@@ -267,19 +267,23 @@ function init()
 	if(show_axis_labels){
 		var sprite_X = makeTextSprite( 0, " X ", 
 		{ fontsize: 48, borderColor: {r:0, g:0, b:0, a:1.0}, borderThickness: 1, backgroundColor: {r:0, g:0, b:0, a:0.5}, fontColor: {r:255, g:174, b:0, a:1.0} } );
-		miniSphereX.add( sprite_X );
+		sprite_X.position.set( sphere_radius+miniSphere_margin, 0, 0 );
+		scene.add( sprite_X );
 		
-		var sprite_X = makeTextSprite( 0, " Y ", 
+		var sprite_Y = makeTextSprite( 0, " Y ", 
 		{ fontsize: 48, borderColor: {r:0, g:0, b:0, a:1.0}, borderThickness: 1, backgroundColor: {r:0, g:0, b:0, a:0.5}, fontColor: {r:16, g:219, b:2, a:1.0} } );
-		miniSphereY.add( sprite_X );
+		sprite_Y.position.set( 0, sphere_radius+miniSphere_margin, 0 );
+		scene.add( sprite_Y );
 		
 		var sprite_Z = makeTextSprite( 0, " Z ", 
 		{ fontsize: 48, borderColor: {r:0, g:0, b:0, a:1.0}, borderThickness: 1, backgroundColor: {r:0, g:0, b:0, a:0.5}, fontColor: {r:50, g:119, b:255, a:1.0} } );
-		miniSphereZ.add( sprite_Z );
+		sprite_Z.position.set( 0, 0, sphere_radius+miniSphere_margin );
+		scene.add( sprite_Z );
 	}
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			REFERENCE PLANES
 	//-----------------------------------------------------------------------------------------------------------------------
+	mat_arc = new THREE.MeshPhongMaterial( { color: arc_color, metal: true, transparent: false, opacity: 1.0, side: THREE.DoubleSide } );
 
 	if(show_planes){
 		//XY plane
@@ -335,12 +339,12 @@ function init()
 			//var clip2 = value_earth.clone().setZ(0).normalize().multiplyScalar(sphere_radius);
 
 			//Draw Arc
-			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 );
 
 			//Used for update()
-			incl_offset = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( -1, 0, 0 ),Math.PI/2);
+			incl_offset = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( 1, 0, 0 ),-Math.PI/2);
 
 
 			//Sprite
@@ -355,6 +359,44 @@ function init()
 		//plane_orb.rotation.x += 0.3;
 		scene.add( plane_orb );
 	}
+
+	//Spheric coordinates
+	if(show_spheric_coords){
+
+		var sphcoord_vector = new THREE.Vector3(1,0,0);
+
+		sphcoord_vector = sphcoord_vector.normalize();
+		var lat=Math.atan2(sphcoord_vector.z,1);
+		var lng=Math.atan2(sphcoord_vector.y,sphcoord_vector.x);
+
+		//create longitude arc
+		long_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_sphcoord_radius, arc_tube, arc_seg_r, arc_seg_t, lng ), mat_arc );
+				
+		scene.add( long_arc );
+
+		//Set longitude arc sprite
+		long_sprite = makeTextSprite( 5, " "+parseFloat(Math.round(lng * 180) / Math.PI).toFixed(1)+"º ", 
+				{ fontsize: 40, borderColor: {r:255, g:255, b:255, a:1.0}, borderThickness: 1, backgroundColor: {r:0, g:0, b:0, a:0.5}, fontColor: {r:255, g:255, b:255, a:1.0} } );
+		long_sprite.position.set( arc_sphcoord_radius, 0, 0);
+		scene.add(long_sprite);
+
+		//create latittude arc
+		lat_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_sphcoord_radius, arc_tube, arc_seg_r, arc_seg_t, lat ), mat_arc );
+		
+		//Rotate arc
+		lat_offset = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( 1, 0, 0 ),Math.PI/2);
+		var lat_offset_i = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( 0, 0, 1 ),lng);
+		
+		lat_arc.quaternion.copy(lat_offset_i.multiply(lat_offset));
+		scene.add( lat_arc );
+
+		//Set latittude arc sprite
+		lat_sprite = makeTextSprite( 6, " "+parseFloat(Math.round(lat * 180) / Math.PI).toFixed(1)+"º ", 
+				{ fontsize: 40, borderColor: {r:255, g:255, b:255, a:1.0}, borderThickness: 1, backgroundColor: {r:0, g:0, b:0, a:0.5}, fontColor: {r:255, g:255, b:255, a:1.0} } );
+		lat_sprite.position = sphcoord_vector.clone().multiplyScalar(arc_sphcoord_radius);
+		scene.add(lat_sprite);
+
+	}
 	
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			SKY

assets/www/js/mySprites.js

@@ -89,6 +89,22 @@ function makeTextSprite(element, message, parameters )
 		backgroundColorInclination = backgroundColor;
 		fontColorInclination = fontColor;
 		sprite.scale.set(20,10,1.0);
+	}else if(element==5){//Longitude
+		contextLongitude = context;
+		fontsizeLongitude = fontsize;
+		borderColorLongitude = borderColor;
+		borderThicknessLongitude = borderThickness; 
+		backgroundColorLongitude = backgroundColor;
+		fontColorLongitude = fontColor;
+		sprite.scale.set(20,10,1.0);
+	}else if(element==6){//Latitude
+		contextLatitude = context;
+		fontsizeLatitude = fontsize;
+		borderColorLatitude = borderColor;
+		borderThicknessLatitude = borderThickness; 
+		backgroundColorLatitude = backgroundColor;
+		fontColorLatitude = fontColor;
+		sprite.scale.set(20,10,1.0);
 	}else{//Axis labels
 		sprite.scale.set(20,10,1.0);
 	}

assets/www/update.js

@@ -99,6 +99,58 @@ function update()
 			updateInclinationSprite(inclination);
 		}
 	}
+	if(show_spheric_coords){
+		
+		var sphcoord_vector;
+		switch(spheric_coords_selection){
+			case "Earth"://Earth
+				sphcoord_vector = value_earth.clone();
+				break;
+			case "Sun"://Earth
+				sphcoord_vector = value_sun.clone();
+				break;
+			case "Velocity"://Earth
+				sphcoord_vector = value_velocity.clone();
+				break;
+			case "Acceleration"://Earth
+				sphcoord_vector = value_acceleration.clone();
+				break;
+			case "Momentum"://Earth
+				sphcoord_vector = value_momentum.clone();
+				break;
+			default:
+				sphcoord_vector = value_velocity.clone();
+				break;
+		}
+
+		sphcoord_vector = sphcoord_vector.normalize();
+		var lat=Math.atan2(sphcoord_vector.z,1);
+		var lng=Math.atan2(sphcoord_vector.y,sphcoord_vector.x);
+
+		/*var lat=Math.atan2(sphcoord_vector.z,Math.sqrt(sphcoord_vector.y*sphcoord_vector.y+sphcoord_vector.x*sphcoord_vector.x));
+		var lng=Math.atan2(sphcoord_vector.x,sphcoord_vector.y);
+*/
+		//modify longitude arc
+		scene.remove( long_arc );
+		long_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_sphcoord_radius, arc_tube, arc_seg_r, arc_seg_t, lng ), mat_arc );
+		scene.add( long_arc );
+
+		updateLongitudeSprite(lng);
+
+		//create latittude arc
+		scene.remove(lat_arc);
+		lat_arc = new THREE.Mesh( new THREE.TorusGeometry( arc_sphcoord_radius, arc_tube, arc_seg_r, arc_seg_t, lat ), mat_arc );
+		
+		//Rotate arc
+		var lat_offset_i = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3( 0, 0, 1 ),lng);
+		
+		lat_arc.quaternion.copy(lat_offset_i.multiply(lat_offset));
+		scene.add( lat_arc );
+
+		//Set latittude arc sprite
+		updateLatitudeSprite(lat);
+		lat_sprite.position = sphcoord_vector.clone().multiplyScalar(arc_sphcoord_radius);
+	}
 	//-----------------------------------------------------------------------------------------------------------------------
 	//			SUN UPDATE
 	//-----------------------------------------------------------------------------------------------------------------------
@@ -237,7 +289,7 @@ function update()
 }
 function updateInclinationSprite(inclination){
 	//Update Sprite
-	var messageInclination = " i="+parseFloat(Math.round(inclination * 180) / Math.PI).toFixed(1)+"º ";
+	var messageInclination = " i="+parseFloat((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)
@@ -271,3 +323,50 @@ function updateInclinationArc(inclination){
 
 	scene.add(incl_arc);
 }
+function updateLatitudeSprite(lat){
+	//Update Sprite
+	var messageLatitude = " "+parseFloat((lat * 180) / Math.PI).toFixed(1)+"º ";
+	contextLatitude.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
+	contextLatitude.fill(); // FILL THE CONTEXT
+	// get size data (height depends only on font size)
+	var metricsLatitude = contextLatitude.measureText( messageLatitude );
+	var textWidthLatitude = metricsLatitude.width;
+	// background color
+	contextLatitude.fillStyle   = "rgba(" + backgroundColorLatitude.r + "," + backgroundColorLatitude.g + ","
+								  + backgroundColorLatitude.b + "," + backgroundColorLatitude.a + ")";
+	// border color
+	contextLatitude.strokeStyle = "rgba(" + borderColorLatitude.r + "," + borderColorLatitude.g + ","
+								  + borderColorLatitude.b + "," + borderColorLatitude.a + ")";
+	contextLatitude.lineWidth = borderThicknessLatitude;
+	roundRect(contextLatitude, borderThicknessLatitude/2, borderThicknessLatitude/2, textWidthLatitude + borderThicknessLatitude, fontsizeLatitude * 1.4 + borderThicknessLatitude, 6);
+	// 1.4 is extra height factor for text below baseline: g,j,p,q.
+	// text color
+	contextLatitude.fillStyle   = "rgba(" + fontColorLatitude.r + "," + fontColorLatitude.g + ","
+								  + fontColorLatitude.b + "," + fontColorLatitude.a + ")";
+	contextLatitude.fillText( messageLatitude, borderThicknessLatitude, fontsizeLatitude + borderThicknessLatitude);
+	lat_sprite.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
+	lat_sprite.position = value_earth.clone().setZ(0).normalize().multiplyScalar(arc_sprite_radius);
+}
+function updateLongitudeSprite(lng){
+	//Update Sprite
+	var messageLongitude = " "+parseFloat((lng * 180) / Math.PI).toFixed(1)+"º ";
+	contextLongitude.fillStyle = "rgba(0, 0, 0, 1.0)"; // CLEAR WITH COLOR BLACK (new BG color)
+	contextLongitude.fill(); // FILL THE CONTEXT
+	// get size data (height depends only on font size)
+	var metricsLongitude = contextLongitude.measureText( messageLongitude );
+	var textWidthLongitude = metricsLongitude.width;
+	// background color
+	contextLongitude.fillStyle   = "rgba(" + backgroundColorLongitude.r + "," + backgroundColorLongitude.g + ","
+								  + backgroundColorLongitude.b + "," + backgroundColorLongitude.a + ")";
+	// border color
+	contextLongitude.strokeStyle = "rgba(" + borderColorLongitude.r + "," + borderColorLongitude.g + ","
+								  + borderColorLongitude.b + "," + borderColorLongitude.a + ")";
+	contextLongitude.lineWidth = borderThicknessLongitude;
+	roundRect(contextLongitude, borderThicknessLongitude/2, borderThicknessLongitude/2, textWidthLongitude + borderThicknessLongitude, fontsizeLongitude * 1.4 + borderThicknessLongitude, 6);
+	// 1.4 is extra height factor for text below baseline: g,j,p,q.
+	// text color
+	contextLongitude.fillStyle   = "rgba(" + fontColorLongitude.r + "," + fontColorLongitude.g + ","
+								  + fontColorLongitude.b + "," + fontColorLongitude.a + ")";
+	contextLongitude.fillText( messageLongitude, borderThicknessLongitude, fontsizeLongitude + borderThicknessLongitude);
+	long_sprite.material.map._needsUpdate = true; // AND UPDATE THE IMAGE..
+}