Skip to content
Snippets Groups Projects
index_orbit.html 17.5 KiB
Newer Older

<!doctype html>
<html lang="en">
<head>
	<title>Sphere</title>
	<meta charset="utf-8">
	<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 type='text/javascript' src="js/three.js"></script>
<script type='text/javascript' src="js/three.ext.js"></script>
<script type='text/javascript' src="interface_orbit.js"></script>
<script type='text/javascript' src="js/mySprites_orbit.js"></script>

<script type='text/javascript' src="js/Detector.js"></script>
<script type='text/javascript' src="js/Stats.js"></script>
<script type='text/javascript' src="js/TrackballControls.js"></script>

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

<script src='extensions/threex.planets.js'></script>
<script src='extensions/threex.atmospherematerial.js'></script>
<script src="extensions/threex.atmospheredatgui.js"></script>

<div id="ThreeJS" style="position: absolute; left:0px; top:0px; background-color:black"></div>
<script>
Xavier Gibert's avatar
Xavier Gibert committed
	var orbit;
	var spacecraft;
	var projection, starSphere, containerEarth;
	// MAIN
	//***********************************************************************************************************************
	//		GLOBAL VARIABLES
	//***********************************************************************************************************************
	setLoadingProgress(5);
	var container, scene, camera, renderer, controls, stats, light, delta;
	var clock = new THREE.Clock();
	var onRenderFcts= [];
	var fps_update_counter = 0;
	//-----------------------------------------------------------------------------------------------------------------------
	//			SCENE PARAMS (Hard-coded parameters)
	//-----------------------------------------------------------------------------------------------------------------------
	var canvas_mode = false;
	var cam_init_pos  = new THREE.Vector3(0,0,13);
	var cam_view_angle = 25;
	var cam_rend_near = 0.1;
	var cam_rend_far = 20000;

	var accel_time = 10;

	var earth_radius = 0.5;
	var axis_radius = earth_radius*1.35;
	var axis_earth_radius = earth_radius*1.15;
	var dist_scale = earth_radius/6371000;
	
	var planes_radius = axis_radius;
	var planes_width = axis_radius*4;
	
	var spacecraft_radius = 0.03;
	
	
	
//-----------------------------------------------------------------------------------------------------------------------
//			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_axis = true;
	var show_axis_labels = true;

Xavier Gibert's avatar
Xavier Gibert committed
	var show_earth = true;
	var show_earth_axis = true;
	var show_earth_atmosphere = true;
	var show_earth_clouds = true;
	var show_xy_plane = true;
	var color_xy_plane = 0xff0094;
	
	var show_spacecraft = true;
Xavier Gibert's avatar
Xavier Gibert committed
	var spacecraft_color = 0xfff200;
	var show_projection = true;
	
	var orbit_color = 0x00ff00;
	
	var performance_level = 3;//1: VeryLow, 2: Low, 3: Normal, 4: High, 5: VeryHigh, 6: Ultra ...;
	
	//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: 
	
	var earth_seg = 32 * segments_scale;
	var plane_resolution = 20*segments_scale;
	var spacecraft_seg = 16*segments_scale;
//-----------------------------------------------------------------------------------------------------------------------
//			DYNAMIC VALUES (Updated at each cycle)
//-----------------------------------------------------------------------------------------------------------------------
	
	var value_spacecraft  = new THREE.Vector3(42164000.0,7.337791634217176E-12,-2.010800849831316E-12); //Km
	var value_earth_rotation = new THREE.Quaternion(0,0,0,1);
	var value_orbit_a = 24396159;
	var value_orbit_e = 0.73;
	var value_orbit_i = Math.PI/9;
	var value_orbit_w = Math.PI;
	var value_orbit_raan = 0;
	
//-----------------------------------------------------------------------------------------------------------------------

	setLoadingProgress(1);
	initScene();
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(3);
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(6);
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(8);
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(10);
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(14);
Xavier Gibert's avatar
Xavier Gibert committed
	setLoadingProgress(18);
Xavier Gibert's avatar
Xavier Gibert committed


	//setLoadingProgress(100);
//reloadModel();//XGGDEBUG: delete
	
	//////////////////////////////////////////////////////////////////////////////////
	//		render the scene						//
	//////////////////////////////////////////////////////////////////////////////////
	onRenderFcts.push(function(){
		renderer.render( scene, camera );		
	})
	
	//////////////////////////////////////////////////////////////////////////////////
	//		loop runner							//
	//////////////////////////////////////////////////////////////////////////////////
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		/*lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec*/
		
		delta = clock.getDelta();
		
		controls.update();
		// call each update function
		onRenderFcts.forEach(function(onRenderFct){
			//onRenderFct(deltaMsec/1000, nowMsec/1000)
			onRenderFct(delta, 0)
		})
	})


function render() 
{
	renderer.render( scene, camera );
}
function includeOrbit(){
	//////////////////////////////////////////////////////////////////////////////////
	//		Orbit						//
	//////////////////////////////////////////////////////////////////////////////////
	
	/*
	var a=3;
	var e=0.7;
	var i = Math.PI/6;
	var w = Math.PI/9;
	var raan = Math.PI/2;
	*/
	
	
Xavier Gibert's avatar
Xavier Gibert committed
	//if(!orbit_init){
		
		createOrbit();
		orbit_init = true;
		onRenderFcts.push(function(delta, now){
			scene.remove(orbit);
			createOrbit();
		});
Xavier Gibert's avatar
Xavier Gibert committed
	//}
}

function createOrbit(){
	var a = value_orbit_a*dist_scale;
	var f=a*value_orbit_e;
	var b = Math.sqrt(a*a-f*f);	

	// Ellipse
	var material = new THREE.LineBasicMaterial({color:orbit_color, opacity:1});
	var ellipse = new THREE.EllipseCurve(0, f, b, a, 0, 2.0 * Math.PI, false);
	var ellipsePath = new THREE.CurvePath();
	ellipsePath.add(ellipse);
	var ellipseGeometry = ellipsePath.createPointsGeometry(100);
	ellipseGeometry.computeTangents();
	orbit = new THREE.Line(ellipseGeometry, material);
	// Argument of the perigee
	orbit.rotation.z = value_orbit_w+Math.PI/2+value_orbit_raan;
	//Inclination
	var nodeA = new THREE.Vector3(Math.cos(value_orbit_raan),Math.sin(value_orbit_raan),0);
	var quat = new THREE.Quaternion();
	quat.setFromAxisAngle(nodeA,value_orbit_i);
	orbit.quaternion.multiplyQuaternions(quat, orbit.quaternion);
	
	scene.add( orbit );
}

function includeSpacecraft(){
	//////////////////////////////////////////////////////////////////////////////////
	//		Spacecraft						//
	//////////////////////////////////////////////////////////////////////////////////
Xavier Gibert's avatar
Xavier Gibert committed
	var material = new THREE.MeshBasicMaterial({color:spacecraft_color, opacity:1});
	var geometry	= new THREE.SphereGeometry(spacecraft_radius, spacecraft_seg, spacecraft_seg);
	spacecraft	= new THREE.Mesh(geometry, material );
	spacecraft.name = "SPACECRAFT";
	scene.add(spacecraft);
	spacecraft_init=true;
	onRenderFcts.push(function(delta, now){
		spacecraft.position = new THREE.Vector3(
			value_spacecraft.x*dist_scale,
			value_spacecraft.y*dist_scale,
			value_spacecraft.z*dist_scale
		);					
	});
	spacecraft.visible = show_spacecraft;
}


function includeProjection(){
	//////////////////////////////////////////////////////////////////////////////////
	//		Projection						//
	//////////////////////////////////////////////////////////////////////////////////
Xavier Gibert's avatar
Xavier Gibert committed
		var lineGeometry = new THREE.Geometry();
		var vertArray = lineGeometry.vertices;
		vertArray.push( new THREE.Vector3(spacecraft.position.x,spacecraft.position.y,spacecraft.position.z), new THREE.Vector3(0, 0, 0) );
		lineGeometry.computeLineDistances();
		var lineMaterial = new THREE.LineDashedMaterial( { color: spacecraft_color, dashSize: 0.02, gapSize: 0.04 } );
Xavier Gibert's avatar
Xavier Gibert committed
		projection = new THREE.Line( lineGeometry, lineMaterial );
		projection.name = "PROJECTION";
		scene.add(projection);
		projection_init = true;
		onRenderFcts.push(function(delta, now){
			projection.geometry.vertices[0].set(spacecraft.position.x,spacecraft.position.y,spacecraft.position.z);
			projection.geometry.computeLineDistances();
			projection.geometry.verticesNeedUpdate = true;
		});
		projection.visible = show_projection;
}

function setXYplane(){
	if(show_xy_plane){
		// points that define shape
		var pts = [], hls = [];
		var radius = planes_radius;
		var radius_ext = planes_width;

		for ( i = 0; i < plane_resolution; i ++ ) {
			var a = 2*Math.PI * i / plane_resolution;
			pts.push( new THREE.Vector2 ( Math.cos( a ) * radius_ext, Math.sin( a ) * radius_ext ) );
			hls.push( new THREE.Vector2 ( Math.cos( a ) * radius, Math.sin( a ) * radius ) );
		}

		// shape to extrude
		var shape = new THREE.Shape( pts );
		var holesPath = new THREE.Path(hls);
		shape.holes.push(holesPath);

		// extrude options
		var options = { 
			amount: 0.01,              // 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( shape, options );

		// mesh
		var plane_xy = new THREE.Mesh( 
			geometry, 
			new THREE.MeshBasicMaterial( { color: color_xy_plane, transparent: true, opacity: 0.2 } )
		);
		scene.add( plane_xy );
	}
}

function includeEarth(){
	
Xavier Gibert's avatar
Xavier Gibert committed
	containerEarth	= new THREE.Object3D();
	//containerEarth.rotateX(Math.PI/2);
	//containerEarth.rotateZ(-23.4 * Math.PI/180);
	containerEarth.position.z	= 0;
Xavier Gibert's avatar
Xavier Gibert committed
	containerEarth.name = "EARTH";
	scene.add(containerEarth);
Xavier Gibert's avatar
Xavier Gibert committed
	if(show_earth){
		containerEarth.visible = true;
	}else{
		containerEarth.visible = false;
	}
	/*
	var geometry	= new THREE.SphereGeometry(1737000*dist_scale, 32, 32);
	var material	= new THREE.MeshPhongMaterial({
		map	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/moonmap1k.jpg'),
		bumpMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/moonbump1k.jpg'),
		bumpScale: 0.002,
	});
	var moonMesh	= new THREE.Mesh(geometry, material);
	moonMesh.position.set(384400000*dist_scale,0.5,0.5);
	moonMesh.scale.multiplyScalar(1/5);
	moonMesh.receiveShadow	= true;
	moonMesh.castShadow	= true;
	containerEarth.add(moonMesh);
	*/

	var geometry	= new THREE.SphereGeometry(earth_radius, earth_seg, earth_seg);
	var material	= new THREE.MeshPhongMaterial({
		map		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),
		bumpMap		: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthbump1k.jpg'),
		bumpScale	: 0.05,
		specularMap	: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthspec1k.jpg'),
		specular	: new THREE.Color('grey'),
	});
	var earthMesh	= new THREE.Mesh(geometry, material);
	
	earthMesh.receiveShadow	= true
	earthMesh.castShadow	= true
Xavier Gibert's avatar
Xavier Gibert committed
	earthMesh.name = "EARTH-PLANET";
	containerEarth.add(earthMesh)
	onRenderFcts.push(function(delta, now){
		//earthMesh.rotation.y += 1/32 * delta * accel_time;
		var offset_quat = new THREE.Quaternion().setFromUnitVectors( new THREE.Vector3(0,1,0), new THREE.Vector3(0,0,1) );
		earthMesh.quaternion.multiplyQuaternions(value_earth_rotation,offset_quat);
Xavier Gibert's avatar
Xavier Gibert committed
	//Earth axis
	var axis_earth = new THREE.AxisHelper( axis_earth_radius );
	axis_earth.rotation.x = -Math.PI/2;
	axis_earth.position.set( 0, 0, 0 );
	axis_earth.name = "EARTH-AXIS"
	earthMesh.add(axis_earth);
Xavier Gibert's avatar
Xavier Gibert committed
		axis_earth.visible = true;
	}else{
		axis_earth.visible = false;
Xavier Gibert's avatar
Xavier Gibert committed
	//Earth atmosphere
	var geometry	= new THREE.SphereGeometry(earth_radius, earth_seg, earth_seg);
	var material	= THREEx.createAtmosphereMaterial();
	material.uniforms.glowColor.value.set(0x00b3ff);
	material.uniforms.coeficient.value	= 0.8;
	material.uniforms.power.value		= 2.0;
	var mesh	= new THREE.Mesh(geometry, material );
	mesh.scale.multiplyScalar(1.01);
	mesh.name = "EARTH-ATM-1";
	containerEarth.add( mesh );
	// new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)
	
	var geometry	= new THREE.SphereGeometry(earth_radius, earth_seg, earth_seg);
	var material	= THREEx.createAtmosphereMaterial();
	material.side	= THREE.BackSide;
	material.uniforms.glowColor.value.set(0x00b3ff);
	material.uniforms.coeficient.value	= 0.5;
	material.uniforms.power.value		= 4.0;
	var mesh2	= new THREE.Mesh(geometry, material );
	mesh2.scale.multiplyScalar(1.15);
	mesh2.name = "EARTH-ATM-2";
	containerEarth.add( mesh2 );
	// new THREEx.addAtmosphereMaterial2DatGui(material, datGUI)
	if(show_earth_atmosphere){
Xavier Gibert's avatar
Xavier Gibert committed
		mesh.visible=true;
		mesh2.visible=true;
	}else{
		mesh.visible=false;
		mesh2.visible=false;
Xavier Gibert's avatar
Xavier Gibert committed
	//Earth clouds
	var earthCloud	= THREEx.Planets.createEarthCloud();
	earthCloud.receiveShadow	= true;
	earthCloud.castShadow	= true;
	earthCloud.name = "EARTH-CLOUDS";
	containerEarth.add(earthCloud);
	onRenderFcts.push(function(delta, now){
		earthCloud.rotation.z += 1/32 * delta * accel_time;		
Xavier Gibert's avatar
Xavier Gibert committed
	});

Xavier Gibert's avatar
Xavier Gibert committed
		earthCloud.visible = true;
	}else{
		earthCloud.visible = false;
	}
}

function setAxis(){
	//-----------------------------------------------------------------------------------------------------------------------
	//			REFERENCE AXIS
	//-----------------------------------------------------------------------------------------------------------------------
	if(show_axis){
		var axis = new THREE.AxisHelper( axis_radius );
		axis.position.set( 0, 0, 0 );
		scene.add( axis );
	}
	if(show_axis_labels){
		var sprite_X = makeTextSprite( 0, " X ", 
		{ fontsize: 128, 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} } );
		sprite_X.position.set( axis_radius, 0, 0 );
		scene.add( sprite_X );
		
		var sprite_Y = makeTextSprite( 0, " Y ", 
		{ fontsize: 128, 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} } );
		sprite_Y.position.set( 0, axis_radius, 0 );
		scene.add( sprite_Y );
		
		var sprite_Z = makeTextSprite( 0, " Z ", 
		{ fontsize: 128, 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} } );
		sprite_Z.position.set( 0, 0, axis_radius );
		scene.add( sprite_Z );
	}
}

function setSky(){
Xavier Gibert's avatar
Xavier Gibert committed
	
	starSphere = THREEx.Planets.createStarfield();
	starSphere.name = "STARS";
	scene.add(starSphere);
	if(!show_sky){
		starSphere.visible = false;
	}else{
		starSphere.visible = true;
	}
}

function initScene(){
	// SCENE
	scene = new THREE.Scene();
	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = cam_view_angle, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = cam_rend_near, FAR = cam_rend_far;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position = cam_init_pos;
	camera.lookAt(scene.position);	
	// RENDERER
	if ( Detector.webgl ){
		renderer = new THREE.WebGLRenderer( { antialias:true } );
		//renderer.autoClear = true;
		//renderer.autoClearColor = true;
		//renderer.setClearColor(0xff0000, 1);
		if(performance_level<=2)
			canvasMode(performance_level);
	}else{
		renderer = new THREE.CanvasRenderer();
		alert('WebGL not supported in this device');
		canvasMode(1);
	}
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById( 'ThreeJS' );
	container.appendChild( renderer.domElement );
	renderer.context.canvas.addEventListener("webglcontextlost", function(event) {
	    event.preventDefault();
	    // animationID would have been set by your call to requestAnimationFrame
	    cancelAnimationFrame(); 
	}, false);

	renderer.context.canvas.addEventListener("webglcontextrestored", function(event) {
	   // Do something 
		alert("WebGL Context Lost");
	}, false);
	
	// EVENTS
	//THREEx.WindowResize(renderer, camera);
	//THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
	window.addEventListener( 'resize', onWindowResize, false );

	// CONTROLS
	//controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls = new THREE.TrackballControls( camera );
	controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
	controls.panSpeed = 0.8;
	controls.noZoom = false;
	controls.maxDistance = 2000;
	controls.noPan = true;
	controls.staticMoving = true;
	controls.dynamicDampingFactor = 0.3;
	controls.keys = [ 65, 83, 68 ];
	controls.addEventListener( 'change', render );

	// STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	//stats.domElement.style.webkitTransform = 0;
	//container.appendChild( stats.domElement );
	// LIGHT
	//light = new THREE.PointLight(0xE0E0E0);
	//light.position.set(200,200,200);
	//scene.add(light);

	// ambient
	var ambient = new THREE.AmbientLight( 0xFFFFFF );
	scene.add( ambient );
	
	onRenderFcts.push(function(delta, now){
		if(show_fps){
			stats.update();
			fps_update_counter=fps_update_counter+1;
			if(fps_update_counter>fps_update_skips){
				fps_update_counter=0;	
				updateFPS();
			}
		}
	})
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	controls.handleResize();

	render();

}

</script>

</body>
</html>