Skip to content
Snippets Groups Projects
index.html 10.8 KiB
Newer Older
Xavier Gibert's avatar
Xavier Gibert committed

<!doctype html>
<html lang="en">
<head>
	<title>Sphere</title>
	<meta charset="utf-8">
	<!--<meta name="viewport" content="width=device-width">--><!-- target-densitydpi=device-dpi -->
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link rel=stylesheet href="css/base.css"/>
</head>
<body>

<!--<script src="js/myThree.js"></script>-->
<!--<script src="js/three.r60.js"></script>-->
<script src="js/three.js"></script>
<script src="js/three.ext.js"></script>
Xavier Gibert's avatar
Xavier Gibert committed
<script src="functions.js"></script>
<script src="init.js"></script>
<script src="update.js"></script>
<script src="js/mySprites.js"></script>

Xavier Gibert's avatar
Xavier Gibert committed
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<!--<script src="js/OrbitControls.js"></script>-->
<script src="js/TrackballControls.js"></script>
<!--<script src="js/THREEx.KeyboardState.js"></script>
Xavier Gibert's avatar
Xavier Gibert committed
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>-->
Xavier Gibert's avatar
Xavier Gibert committed

<script type='text/javascript' src='js/DAT.GUI.min.js'></script>

<script src="js/shaders/ShaderEngine.js"></script><!-- SC engine plasma -->
<script src="js/shaders/ShaderGlow.js"></script><!-- Sun glow effect -->
<script src="js/shaders/ShaderSun.js"></script><!-- Sun surface -->



<!-- jQuery code to display an information button and box when clicked. -->
<!--<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>-->
<!--<script src="js/info.js"></script>-->
<!--<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
<a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a>
</div>-->
<!-- ------------------------------------------------------------ -->


<script type="text/javascript">
Xavier Gibert's avatar
Xavier Gibert committed
</script>
<!--<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />-->

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
	// MAIN
	//***********************************************************************************************************************
	//		GLOBAL VARIABLES
	//***********************************************************************************************************************
	setLoadingProgress(5);
	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();
Xavier Gibert's avatar
Xavier Gibert committed
	var clock = new THREE.Clock();
	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;
Xavier Gibert's avatar
Xavier Gibert committed
	var origin = new THREE.Vector3(0,0,0);
	var fontsizeSun, borderColorSun, borderThicknessSun, backgroundColorSun, fontColorSun, mat_arc;
Xavier Gibert's avatar
Xavier Gibert committed
	var fontsizeEarth, borderColorEarth, borderThicknessEarth, backgroundColorEarth, fontColorEarth;
	var fontsizeInclination, borderColorInclination, borderThicknessInclination, backgroundColorInclination, fontColorInclination;
	var fontsizeLongitude, borderColorLongitude, borderThicknessLongitude, backgroundColorLongitude, fontColorLongitude;
	var fontsizeLatitude, borderColorLatitude, borderThicknessLatitude, backgroundColorLatitude, fontColorLatitude;

Xavier Gibert's avatar
Xavier Gibert committed
	var fps_update_counter = 0;
	var miniSphereX,miniSphereXX,miniSphereY,miniSphereYY,miniSphereZ,miniSphereZZ;
Xavier Gibert's avatar
Xavier Gibert committed
	var gui, parameters;
	var axis_x = new THREE.Vector3(1,0,0);
Xavier Gibert's avatar
Xavier Gibert committed
	
	//-----------------------------------------------------------------------------------------------------------------------
	//			SCENE PARAMS (Hard-coded parameters)
	//-----------------------------------------------------------------------------------------------------------------------
	var canvas_mode = false;
	var cam_init_pos  = new THREE.Vector3(300,300,300);
	var cam_view_angle = 25;
	var cam_rend_near = 0.1;
	var cam_rend_far = 20000;
	
	var sphere_radius = 100;
	var miniSphere_radius = 5;
	var miniSphere_margin = 4;
	var torus_radius = sphere_radius;
	var torus_tube = 0.5;
	
Xavier Gibert's avatar
Xavier Gibert committed
	var sc_scale = 1.5;

	var init_sc_dir_xyz = new THREE.Vector3(-0.577,0.577,-0.577);
	var init_sc_up_xyz = new THREE.Vector3(0.577,0.577,0.577);
	var init_sc_dir_rear = new THREE.Vector3(0,0,-1);
	var init_sc_up_rear = new THREE.Vector3(0,1,0);
	var init_sc_dir_front = new THREE.Vector3(0,0,1);
	var init_sc_up_front = new THREE.Vector3(0,1,0);
	var init_sc_dir_top = new THREE.Vector3(0,1,0);
	var init_sc_up_top = new THREE.Vector3(0,0,1);
	var init_sc_dir_bottom = new THREE.Vector3(0,-1,0);
	var init_sc_up_bottom = new THREE.Vector3(0,0,1);
	var init_sc_dir_left = new THREE.Vector3(1,0,0);
	var init_sc_up_left = new THREE.Vector3(0,1,0);
	var init_sc_dir_right = new THREE.Vector3(-1,0,0);
	var init_sc_up_right = new THREE.Vector3(0,1,0);

Xavier Gibert's avatar
Xavier Gibert committed
	var sc_axis_lenght = sphere_radius*0.4;
Xavier Gibert's avatar
Xavier Gibert committed
	var sc_body_color = 0xDDDDDD;
	var sc_window_color = 0x00d4ff;
	var sc_engine_color = 0x545454;
	var sc_eng_solid_color = 0x5d00ff;//For when not using texture

	var sun_radius = 5;
	var sun_solid_color = 0xffb600 ;//For when not using textures
	var sun_obj_dist = sphere_radius + 10;
	
	var earth_radius = 8;
	var earth_solid_color = 0x00bfff ;//For when not using textures
	var earth_obj_dist = sphere_radius + earth_radius;

	var planes_width = sphere_radius+earth_radius*2;
	var plane_theta_seg = 30;
	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;
Xavier Gibert's avatar
Xavier Gibert committed
	
	var arrow_head_length = 9;
	var arrow_head_width = 5;
	var arrow_max_length = sphere_radius;
	var target_head_length = 2;
	var target_head_width = 1;
	var target_length = sphere_radius + target_head_width;
Xavier Gibert's avatar
Xavier Gibert committed
	var momentum_length = sphere_radius/3;
Xavier Gibert's avatar
Xavier Gibert committed
	var momentum_head_length = 8;
	var momentum_head_width = 7;	

//-----------------------------------------------------------------------------------------------------------------------
//			DEBUG OPTIONS
//-----------------------------------------------------------------------------------------------------------------------

	var auto_rotate_sc = false;// If true, it ignores the simulator attitude and rotates the spacecraft.
Xavier Gibert's avatar
Xavier Gibert committed
		
//-----------------------------------------------------------------------------------------------------------------------
//			PERFORMANCE VALUES (Set at initialization)
//-----------------------------------------------------------------------------------------------------------------------
	
	var show_fps = true;//Show FPS stats in Android
	var fps_update_skips = 60;

	var show_sky = true;
	var show_sphere = true;
Xavier Gibert's avatar
Xavier Gibert committed
	var show_mini_spheres = true;
	var show_circles = true;
	var show_axis = true;
	var show_axis_labels = 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"

Xavier Gibert's avatar
Xavier Gibert committed
	
	var show_spacecraft = true;//If set to false, instead of a S/C it will be a miniSphere in the reference position.
Xavier Gibert's avatar
Xavier Gibert committed
	var show_sc_axis = true;
	var sc_show_eng_texture = true;
Xavier Gibert's avatar
Xavier Gibert committed
	
	var show_sun = true;
	var sun_rotates = true;
	var sun_rotation_speed = 5;//Rotation speed multiplier [0->9]
	var show_sun_texture = true;
Xavier Gibert's avatar
Xavier Gibert committed
	var sun_simple_glow = true;//Recomended to not use the shader glow, problems in android
	var sun_show_line = true;
	var sun_show_dist = true;
	
	var show_earth = true;
	var earth_rotates = true;
	var earth_rotation_speed = 2;//Rotation speed multiplier [0->9]
	var show_earth_texture = true;
Xavier Gibert's avatar
Xavier Gibert committed
	var earth_show_line = true;
	var earth_show_dist = true;
	
	var show_velocity = true;
	var color_velocity = 0x001dff;
	var limit_velocity = 15; //Km/s value corresponding to the full length arrow (touching the sphere)
	var show_acceleration = true;
	var color_acceleration = 0xfc00b0;
	var limit_acceleration = 15; //Km/s2 value corresponding to the full length arrow (touching the sphere)
	var show_momentum = true;
	var color_momentum = 0x00fc19;
	var show_target_a = true;
	var color_target_a = 0xff0000;
	var show_vector_a = false;
	var color_vector_a = 0x00fffa;
	var limit_vector_a = 25; //In the same units as the provided values
	var show_direction_a = false;
	var color_direction_a = 0xffff00;Math.asin
	var performance_level = 3;//1: VeryLow, 2: Low, 3: Normal, 4: High, 5: VeryHigh, 6: Ultra ...;
Xavier Gibert's avatar
Xavier Gibert committed
	
	getInitialization();//If used in Android, update the init params with the Android configuration
	
	// Segments
	if(performance_level<1)
		performance_level=1;
	var segments_scale = performance_level;//Multiply segments of all geometries: 
Xavier Gibert's avatar
Xavier Gibert committed
	var sc_body_segments = 8 * segments_scale;
	var sc_window_segments = 10 * segments_scale;
	var sc_engine_segments = 10 * segments_scale;
Xavier Gibert's avatar
Xavier Gibert committed
	var sc_eng_disk_segments = sc_engine_segments;
	var sun_seg = 10 * segments_scale;
	var earth_seg = 12 * segments_scale;
	var sphere_segments = 20 * segments_scale;
	var miniSphere_seg = 7 * segments_scale;
	var torus_seg_r = 4 * segments_scale;
	var torus_seg_t = 32 * segments_scale;
	var arc_seg_r = 4 * segments_scale;
	var arc_seg_t = 32 * segments_scale;
Xavier Gibert's avatar
Xavier Gibert committed
	var arrow_segments = 4 * segments_scale;
	var momentum_segments = 4 * segments_scale;
	var target_segments = 8 * segments_scale;
//-----------------------------------------------------------------------------------------------------------------------
//			DYNAMIC VALUES (Updated at each cycle)
//-----------------------------------------------------------------------------------------------------------------------
	
	var value_attitude  = new THREE.Quaternion(0,0,0,1);
Xavier Gibert's avatar
Xavier Gibert committed
	var value_sun  = new THREE.Vector3(87000000,87000000,87000000); //Km
	var value_earth  = new THREE.Vector3(36000,12000,2500); //Km
Xavier Gibert's avatar
Xavier Gibert committed
	var value_velocity  = new THREE.Vector3(0,0,-15); //Km/s
	var value_acceleration  = new THREE.Vector3(-5,0,0); //Km/s2
	var value_momentum  = new THREE.Vector3(-5,0,-5); // direction --> will be normalized
	var value_target_a  = new THREE.Vector3(-5,-5,-5); // direction --> will be normalized
	var value_vector_a  = new THREE.Vector3(-7,-5,-5); // will be normalized with its limit
	var value_direction_a  = new THREE.Vector3(-5,-5,-7); // direction --> will be normalized
	
	
	
	//-----------------------------------------------------------------------------------------------------------------------

	init();
	animate();

// FUNCTIONS 		


function animate() 
{
    	requestAnimationFrame( animate );
Xavier Gibert's avatar
Xavier Gibert committed
	render();		
	update();
}

Xavier Gibert's avatar
Xavier Gibert committed

function render() 
{
	renderer.render( scene, camera );
}

</script>

</body>
</html>