https://ammarshadiq.github.io/planetaise/earth.html

1<!-- Author: Ammar Shadiq -->
2<!doctype html>
3<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
4	<head>
5		<title>planetaise - Earth</title>
6		<meta charset="utf-8">
7		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
8		<meta property="og:title" content="Planetaise - Earth" />
9		<meta property="og:type" content="blog" />
10		<meta property="og:url" content="https://ammarshadiq.github.io/planetaise/earth.html" />
11		<meta property="og:image" content="https://ammarshadiq.github.io/planetaise/img/earth_screenshot.png" />
12		<meta property="og:site_name" content="ammarshadiq.github.io.com" />
13		<meta property="og:description" content="A WebGL experiment showing earth and the area of sunlight it receive based on the actual current day of the year." />
14		<style>
15			body {
16				background: #000;
17				color: #EEE;
18				padding: 0;
19				margin: 0;
20				font-weight: bold;
21				overflow: hidden;
22
23				font-family: Monospace;
24				font-size: 13px;
25				text-align: center;
26			}
27
28			#info {
29				position: absolute;
30				top: 0px;
31				width: 100%;
32				padding: 5px;
33				z-index: 100;
34			}
35
36			a { color: skyblue; }
37			b { color: green; }
38		</style>
39
40		

40<script src="build/Three.js"></script>

40
41		
42		

42<script src="js/Detector.js"></script>

42
43		

43<script src="js/RequestAnimationFrame.js"></script>

43
44
45	</head>
46
47	<body>
48		<div id="d">
49			<div id="info" style="text-align:left;z-index:101;background: rgba(255,255,255,0.1);"> <a href="/planetaise/" target="_self">Ke Tata Surya</a> </div>
50			<div id="info">
51				<b>Navigasi</b> mouse &amp; tekan <b>tombol kiri:</b> putar, <b>tombol tengah:</b> zoom, <b>tombol kanan:</b> geser
52			</div>
53		</div>
54
55		

55<script>
56
57			// Converts from degrees to radians.
58			Math.radians = function(degrees) {
59			  return degrees * Math.PI / 180;
60			};
61			 
62			// Converts from radians to degrees.
63			Math.degrees = function(radians) {
64			  return radians * 180 / Math.PI;
65			};
66
67			var now = new Date();
68			var start = new Date(now.getFullYear(), 0, 0);
69			var diff = now - start;
70			var dayOfYear = Math.floor((now-start) / (1000*60*60*24));
71	
72			var tilt = Math.radians(23.45 * Math.sin(Math.radians((360/365)*(284+dayOfYear))));
73
74			var radius = 6371,
75			rotationSpeed = 0.1,
76
77			cloudsScale = 1.005,
78			moonScale = 0.23,
79
80			height = window.innerHeight,
81			width  = window.innerWidth,
82
83			container, //stats,
84
85			camera, controls, scene, renderer,
86			geometry, meshPlanet, meshClouds, meshMoon,
87			dirLight, ambientLight,
88
89			clock = new THREE.Clock();
90
91			window.onload = function() {
92
93				if ( !Detector.webgl ) {
94
95					Detector.addGetWebGLMessage();
96					return;
97
98				}
99
100				init();
101				animate();
102
103			}
104
105			function init() {
106
107				container = document.createElement( 'div' );
108				document.body.appendChild( container );
109
110				scene = new THREE.Scene();
111
112				renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
113				renderer.setSize( width, height );
114				renderer.sortObjects = false;
115				renderer.autoClear = false;
116
117				container.appendChild( renderer.domElement );
118
119				camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
120				camera.position.z = radius * 7;
121
122				controls = new THREE.TrackballControls( camera, renderer.domElement );
123
124				controls.rotateSpeed = 1.0;
125				controls.zoomSpeed = 1.2;
126				controls.panSpeed = 0.2;
127
128				controls.noZoom = false;

129				controls.noPan = false;
130
131				controls.staticMoving = true;
132				controls.dynamicDampingFactor = 0.3;
133
134				controls.minDistance = radius * 1.1;
135				controls.maxDistance = radius * 100;
136
137				controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
138
139
140				dirLight = new THREE.DirectionalLight( 0xFFFFFF );
141				dirLight.position.set( -1, 0, 1 ).normalize();
142				scene.add( dirLight );
143
144				var planetTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" ),
145				cloudsTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" ),
146				normalTexture     = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" ),
147				specularTexture   = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ),
148				moonTexture       = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
149
150				var shader = THREE.ShaderUtils.lib[ "normal" ],
151				uniforms = THREE.UniformsUtils.clone( shader.uniforms );
152
153				uniforms[ "tNormal" ].texture = normalTexture;
154				uniforms[ "uNormalScale" ].value = 0.85;
155
156				uniforms[ "tDiffuse" ].texture = planetTexture;
157				uniforms[ "tSpecular" ].texture = specularTexture;
158
159				uniforms[ "enableAO" ].value = false;
160				uniforms[ "enableDiffuse" ].value = true;
161				uniforms[ "enableSpecular" ].value = true;
162
163				uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
164				uniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
165				uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
166
167				uniforms[ "uShininess" ].value = 15;
168
169				var materialNormalMap = new THREE.ShaderMaterial({
170					fragmentShader: shader.fragmentShader,
171					vertexShader: shader.vertexShader,
172					uniforms: uniforms,
173					lights: true
174				});
175
176				// globeWhole
177				
178				globeWhole = new THREE.Object3D;
179				globe = new THREE.Object3D;
180
181				//globeWhole.position.x = 360;
182				//globeWhole.rotation.z = .465;
183				globeWhole.rotation.x = tilt;
184				
185				
186				// planet
187
188				geometry = new THREE.SphereGeometry( radius, 100, 50 );
189				geometry.computeTangents();
190
191				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
192				//meshPlanet.rotation.y = 1.3;
193				//meshPlanet.rotation.z = tilt;
194				//scene.add( meshPlanet );
195
196
197				// clouds
198
199				var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );
200
201				meshClouds = new THREE.Mesh( geometry, materialClouds );
202				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
203				meshClouds.rotation.z = tilt;
204
205				// tick
206				
207				tickMaterial = new THREE.LineBasicMaterial( { opacity: .8, linewidth: 1,  blending: THREE.AdditiveBlending, transparent : true } );
208				tickMaterial.color.setHSV( 1.0, 1.0, 1.0);
209				
210				ticks = new THREE.Object3D;
211				
212				lineRadius = radius + 500;
213				
214				for (var longitude = 2 * Math.PI; longitude >= Math.PI/30; longitude-=Math.PI/30) {
215
216					tickGeometry = new THREE.Geometry();
217					latitude = Math.PI /2;			
218
219								
220					x = lineRadius * Math.cos(longitude) * Math.sin(latitude);
221					z = lineRadius * Math.sin(longitude) * Math.sin(latitude);
222					y = lineRadius * Math.cos(latitude); 						
223		
224					xb = (lineRadius + 200) * Math.cos(longitude) * Math.sin(latitude);
225					zb = (lineRadius + 200) * Math.sin(longitude) * Math.sin(latitude);
226					yb = (lineRadius + 200) * Math.cos(latitude); 
227		
228					vector = new THREE.Vector3( x, y, z );
229					vectorb = new THREE.Vector3( xb, yb, zb );
230			
231					tickGeometry.vertices.push( new THREE.Vertex( vector ) );
232					tickGeometry.vertices.push( new THREE.Vertex( vectorb ) );
233			
234					tick = new THREE.Line( tickGeometry, tickMaterial, THREE.LineStrip );
235					ticks.add( tick );
236				}					
237	
238				
239				
240				// Planet rotation axis line
241
242				planetRotationLineMaterial = new THREE.LineBasicMaterial( { opacity: .8, linewidth: 1, blending: THREE.AdditiveBlending } );
243				planetRotationLineMaterial.color.setHSV( 1.0, 1.0, 1.0);
244				
245				planetRotationAxis = new THREE.Object3D;
246				
247				planetRotationAxisXGeometry = new THREE.Geometry();
248				planetRotationAxisXVectorA = new THREE.Vector3( -9000, 0, 0 );
249				planetRotationAxisXVectorB = new THREE.Vector3( 9000, 0, 0 );
250				planetRotationAxisXGeometry.vertices.push( new THREE.Vertex( planetRotationAxisXVectorA ) );
251				planetRotationAxisXGeometry.vertices.push( new THREE.Vertex( planetRotationAxisXVectorB ) );
252				planetRotationAxisX = new THREE.Line( planetRotationAxisXGeometry, planetRotationLineMaterial, THREE.LineStrip );
253				planetRotationAxis.add(planetRotationAxisX);
254				
255				planetRotationAxisYGeometry = new THREE.Geometry();
256				planetRotationAxisYVectorA = new THREE.Vector3( 0, -9000, 0 );
257				planetRotationAxisYVectorB = new THREE.Vector3( 0, 9000, 0 );
258				planetRotationAxisYGeometry.vertices.push( new THREE.Vertex( planetRotationAxisYVectorA ) );
259				planetRotationAxisYGeometry.vertices.push( new THREE.Vertex( planetRotationAxisYVectorB ) );
260				planetRotationAxisY = new THREE.Line( planetRotationAxisYGeometry, planetRotationLineMaterial, THREE.LineStrip );
261				planetRotationAxis.add(planetRotationAxisY);
262											
263				planetRotationAxisZGeometry = new THREE.Geometry();
264				planetRotationAxisZVectorA = new THREE.Vector3( 0, 0, -9000 );
265				planetRotationAxisZVectorB = new THREE.Vector3( 0, 0, 9000 );
266				planetRotationAxisZGeometry.vertices.push( new THREE.Vertex( planetRotationAxisZVectorA ) );
267				planetRotationAxisZGeometry.vertices.push( new THREE.Vertex( planetRotationAxisZVectorB ) );
268				planetRotationAxisZ = new THREE.Line( planetRotationAxisZGeometry, planetRotationLineMaterial, THREE.LineStrip );
269				planetRotationAxis.add(planetRotationAxisZ);
270						
271				// Orbital Perpendicular Line
272				/*
273				orbitalPerpendicularLineMaterial = new THREE.LineBasicMaterial( { opacity: .8, linewidth: 1, blending: THREE.AdditiveBlending } );
274				orbitalPerpendicularLineMaterial.color.setHSV( .16, 1.0, 1.0  );
275				
276				orbitalPerpendicularLineGeometry = new THREE.Geometry();
277				orbitalPerpendicularLineVectorA = new THREE.Vector3( 0, -9000, 0 );
278				orbitalPerpendicularLineVectorB = new THREE.Vector3( 0, 9000, 0 );
279				orbitalPerpendicularLineGeometry.vertices.push( new THREE.Vertex( orbitalPerpendicularLineVectorA ) );
280				orbitalPerpendicularLineGeometry.vertices.push( new THREE.Vertex( orbitalPerpendicularLineVectorB ) );
281				orbitalPerpendicularLine = new THREE.Line( orbitalPerpendicularLineGeometry, orbitalPerpendicularLineMaterial, THREE.LineStrip );
282				*/
283
284				// sun light line
285
286				var resolution = 90;				
287				var size = 360 / resolution;
288				sunLightLineMaterial = new THREE.LineBasicMaterial( { opacity: .8, linewidth: 1, blending: THREE.AdditiveBlending } );
289				sunLightLineMaterial.color.setHSV( .16, 1.0, 1.0 );
290				sunLightLineGeometry = new THREE.Geometry();
291				for ( var i = 0; i <= resolution; i ++ ) {
292					segment = ( i * size ) * Math.PI / 180;					
293					sunLightLineGeometry.vertices.push( 
294						new THREE.Vertex( 
295							new THREE.Vector3( 
296								Math.cos( segment ) * (radius+10), 
297								0, 
298								Math.sin( segment ) * (radius+10) 
299							) 
300						) 
301					);
302				}
303				sunLightLine = new THREE.Line( sunLightLineGeometry, sunLightLineMaterial );
304				sunLightLine.rotation.x = ((90 * (Math.PI / 180)));
305				sunLightLine.rotation.z = ((45 * (Math.PI / 180)));
306							
307				// moon
308
309				var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
310
311				meshMoon = new THREE.Mesh( geometry, materialMoon );
312				meshMoon.position.set( radius * 5, 0, 0 );
313				meshMoon.scale.set( moonScale, moonScale, moonScale );
314
315				globeWhole.add( meshPlanet );
316				globeWhole.add( meshClouds );
317				globeWhole.add( ticks );	
318				globeWhole.add( planetRotationAxis );
319				globeWhole.add( meshMoon );
320				scene.add( globeWhole );
321				//globe.add( orbitalPerpendicularLine );

322				globe.add( sunLightLine );
323				scene.add ( globe );
324
325				// stars
326
327				var i,
328				vector,
329				starsGeometry = new THREE.Geometry();
330
331				for ( i = 0; i < 1500; i ++ ) {
332
333					vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
334					vector.multiplyScalar( radius );
335
336					starsGeometry.vertices.push( new THREE.Vertex( vector ) );
337
338				}
339
340				var stars,
341				starsMaterials = [
342					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
343					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
344					new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
345					new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
346					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
347					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
348				];
349				
350				for ( i = 10; i < 30; i ++ ) {
351
352					stars = new THREE.ParticleSystem( starsGeometry, starsMaterials[ i % 6 ] );
353
354					stars.rotation.x = Math.random() * 6;
355					stars.rotation.y = Math.random() * 6;
356					stars.rotation.z = Math.random() * 6;
357
358					var s = i * 10;
359					stars.scale.set( s, s, s );
360
361					stars.matrixAutoUpdate = false;
362					stars.updateMatrix();
363
364					scene.add( stars );
365
366				}
367
368				//stats = new Stats();
369				//stats.domElement.style.position = 'absolute';
370				//stats.domElement.style.top = '0px';
371				//stats.domElement.style.zIndex = 100;
372				//container.appendChild( stats.domElement );
373
374				window.addEventListener( 'resize', onWindowResize, false );
375
376			};
377
378			function onWindowResize( event ) {
379
380				width = window.innerWidth;
381				height = window.innerHeight;
382
383				renderer.setSize( width, height );
384
385				camera.aspect = width / height;
386				camera.updateProjectionMatrix();
387
388				controls.screen.width = width;
389				controls.screen.height = height;
390
391				camera.radius = ( width + height ) / 4;
392
393			};
394
395			function animate() {
396
397				requestAnimationFrame( animate );
398
399				render();
400				//stats.update();
401
402			};
403
404			function render() {
405
406				var delta = clock.getDelta();
407
408				meshPlanet.rotation.y += rotationSpeed * delta;
409				planetRotationAxis.rotation.y += rotationSpeed * delta;
410				meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
411				
412				ticks.rotation.y -= .001;
413
414				var angle = delta * rotationSpeed;
415
416				meshMoon.position = new THREE.Vector3(
417					Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
418					0,
419					Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
420				);
421				meshMoon.rotation.y -= angle;
422
423				controls.update();
424
425				renderer.clear();
426				renderer.render( scene, camera );
427
428			};
429
430		</script>

430
431	</body>
432</html>