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>
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;
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;
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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();
setSky();
setAxis();
includeSpacecraft();
includeProjection();
includeOrbit();
//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();
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
// 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;
*/
createOrbit();
orbit_init = true;
onRenderFcts.push(function(delta, now){
scene.remove(orbit);
createOrbit();
});
}
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 //
//////////////////////////////////////////////////////////////////////////////////
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 //
//////////////////////////////////////////////////////////////////////////////////
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 } );
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;
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
}
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(){
//containerEarth.rotateX(Math.PI/2);
//containerEarth.rotateZ(-23.4 * Math.PI/180);
containerEarth.position.z = 0;
scene.add(containerEarth);
if(show_earth){
containerEarth.visible = true;
}else{
containerEarth.visible = false;
}
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
/*
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
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);
//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);
if(show_earth_axis){
axis_earth.visible = true;
}else{
axis_earth.visible = false;
//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){
mesh.visible=true;
mesh2.visible=true;
}else{
mesh.visible=false;
mesh2.visible=false;
//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;
if(show_earth_clouds){
earthCloud.visible = true;
}else{
earthCloud.visible = false;
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
}
}
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(){
starSphere = THREEx.Planets.createStarfield();
starSphere.name = "STARS";
scene.add(starSphere);
if(!show_sky){
starSphere.visible = false;
}else{
starSphere.visible = true;
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
}
}
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);
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
// 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>