/
earth-moon-system-dynamic.html
123 lines (101 loc) · 3.46 KB
/
earth-moon-system-dynamic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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
117
118
119
120
121
122
123
<html>
<head>
<title>Spheres</title>
<style>
body { margin: 0; background-color: black;}
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="../lib/three.min.js"></script>
<script src="../lib/orbit_controls.js"></script>
<script>
//Camera, scene, and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000);
scene.add(camera);
camera.position.set(0,35,70);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//Orbit Controls
var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
//Lights
var ambientLight = new THREE.AmbientLight(0xf1f1f1);
scene.add(ambientLight);
var spotLight = new THREE.DirectionalLight(0xffffff);
spotLight.position.set(50,50,50);
scene.add(spotLight);
//Objects (We build a mesh using a geometry and a material)
//Earth
var earthGeometry = new THREE.SphereGeometry(10, 50, 50);
var earthMaterial = new THREE.MeshPhongMaterial({
map: new THREE.ImageUtils.loadTexture("/images/earth_3.jpg"),
color: 0xf2f2f2,
specular: 0xbbbbbb,
shininess: 2
});
var earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
//Clouds
var cloudGeometry = new THREE.SphereGeometry(10.3, 50, 50);
var cloudMaterial = new THREE.MeshPhongMaterial({
map: new THREE.ImageUtils.loadTexture("/images/clouds_2.jpg"),
transparent: true,
opacity: 0.1
});
var clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(clouds);
//Stars
var starGeometry = new THREE.SphereGeometry(1000, 50, 50);
var starMaterial = new THREE.MeshPhongMaterial({
map: new THREE.ImageUtils.loadTexture("/images/galaxy_starfield.png"),
side: THREE.DoubleSide,
shininess: 0
});
var starField = new THREE.Mesh(starGeometry, starMaterial);
scene.add(starField);
//Moon
var moonGeometry = new THREE.SphereGeometry(3.5, 50,50);
var moonMaterial = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture("/images/moon_texture.jpg")
});
var moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(35,0,0);
scene.add(moon);
//Camera vector
var earthVec = new THREE.Vector3(0,0,0);
var r = 35;
var theta = 0;
var dTheta = 2 * Math.PI / 1000;
var dx = .01;
var dy = -.01;
var dz = -.05;
//Render loop
var render = function() {
earth.rotation.y += .0009;
clouds.rotation.y += .00005;
//Moon orbit
theta += dTheta;
moon.position.x = r * Math.cos(theta);
moon.position.z = r * Math.sin(theta);
//Flyby
if (camera.position.z < 0) {
dx *= -1;
}
camera.position.x += dx;
camera.position.y += dy;
camera.position.z += dz;
camera.lookAt(earthVec);
//Flyby reset
if (camera.position.z < -100) {
camera.position.set(0,35,70);
}
camera.lookAt(earthVec);
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
</script>
</body>
</html>