-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
463 lines (399 loc) · 19.1 KB
/
Copy pathindex.html
File metadata and controls
463 lines (399 loc) · 19.1 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
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
302
303
304
305
306
307
308
309
310
311
312
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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
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
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html>
<head>
<title>Moon Structure</title>
<link rel="icon" type="image/x-icon" href="https://earthhow.com/wp-content/uploads/2019/08/Man-on-the-moon-425x425.png">
<style>
body {
margin: 0;
padding: 0;
background-color: black;
height: 100%; width : 100%;
overflow-y: hidden;
}
canvas { width: 100%; height: 100% ; vertical-align:bottom; margin: 0; z-index: 289;}
.info{
background-color: rgb(36, 36, 36);
position: absolute;
color: white;
right: 0px;
top: 0px;
height: 100vh;
width: 33vw;
scroll-behavior: smooth;
word-wrap: normal;
overflow-y: auto;
padding: 0vh 1vw;
border-radius: 2%;
}
b{
background-color: rgb(50,50,50);
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
border-radius: 10%;
transition: width 1s ease-in-out;
}
img:hover{
width: 100%;
height: auto;
}
figcaption{
text-align: center;
color: rgb(150,150,150);
}
#load{
color: white;
}
.controls {
width: fit-content;
height: fit-content;
padding: 1.5vh 1.2vw;
position: fixed;
transition: 0.5s ease;
bottom: -600px; /* or something else*/
background-color: rgb(36,36,36);
color: white;
border-radius: 20px;
}
.controls:hover{
bottom: 0px;
}
.controls::before {
content: " ↑ Controls ";
position: fixed;
background: rgb(36,36,36);
color: white;
cursor: pointer;
padding: 2vh 1.2vw;
border-radius: 10px;
font-size: 24px;
font-weight: 900;
bottom: 0px;
transition: 1.5s ease;
}
.controls:hover::before{ /* hide it */
bottom: -100px;
}
button{
background-color: #22252b; /* Green */
border: none;
color: white;
padding: 1.2vh 1vw;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 2vh;
margin: 4px 2px;
cursor: pointer;
border-radius: 10%;
}
button:hover {
background-color: #31353d;
}
p1{
font-size: 1.2vw;
font-family: "Monoco";
}
li{
font-size: 1.2vw;
font-family: "Monoco";
}
a:link, a:visited {
background-color: #1a1a1a;
color: white;
padding: 1.2vh 1.2vw;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 7px;
margin: 2px;
}
a:hover, a:active {
background-color: rgb(58, 58, 58);
}
#creditlist{
word-wrap: break-word;
}
a.basic:link, a.basic:visited {
color:#ff0000;
padding: 0;
text-align: left;
text-decoration: none;
display: inline;
border-radius: 0px;
margin: 0px;
}
a.basic:hover {color:#ffcc00;}
</style>
</head>
<body>
<h1 id = "load">Loading... please wait</h1>
<div class = "controls">
<h3>Controls:</h3>
<button id = "resetpos">View1</button><button id = "top">View2</button><button id = "fulltop">View3</button>
<br>
<button id = "canvasSmall">><</button> <button id = "canvasBig"><></button>
<br>
<button id = "pause">Pause</button>
</div>
<noscript>Simulation cannot load because javascript is disabled</noscript>
<div class = "info">
<h1>Moon Structure!</h1>
<figcaption>You may be using an old file... the up to date vesion is on <a class = "basic" href = "https://coderz75.github.io/Science-Moon-Model/">Github</a></figcaption>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg" alt="Picture of the Moon.">
<figcaption>Source: Wikepedia</figcaption>
<br>
<p1>The moon. The big piece of rock flying through the sky. The host of the lady on it. An endless supply of cheese. A common symbol of many myths. How did such a thing come to creation? What is it really?</p1>
<br>
<p1>With the tools of our handy simulation (to the left), we shall explore such questions, about what exactly is the flying sphere of light in the sky made of.</p1>
<br>
<br>
<p1>Table of contents:</p1> <br>
<a href="#origin">Origin</a><br>
<a href="#features">Features</a><br>
<a href="#inside">The insides</a><br>
<a href="#vocab">Vocabulary</a><br>
<a href="#credits">Credits</a><br>
<h2 id = "origin">Origins</h2>
<a href="#giantimpact">Giant Impact Hypothesis</a> <a href="#fission">Fission Hypothesis</a> <br>
<p1 id = "giantimpact">So, how did this thing come to be? Modern reaserchers have theorized that the moon was cause by a planet, about the size of Mars, colliding with the Earth. The ejecta, or debree from the impact, was sent flying into space. In space, the ejecta started clumping togetjer due to gravity, and our moon was born, according to the widely accepted <b>Giant Impact Hypothesis.</b></p1> <br><br>
<p1 id = "fission">Additionally, the <b>Fission Hypothesis</b> proposes the the moon was once part of the Earth like the Giant Imact Hypothesis. People thought that perhaps the moon was created by a rapidly spinning Earth, where the spin was so fast that it yeated pieces of it's rock to space, where it became the moon. However, there is no evidence of such rapid spin.</p1>
<br><br>
<p1>However, reaserch has concluded that the Moon has a similar composition to that of Earth, and rocks such as Anorthosite, does support the fact that the Moon was at some point in time, part of the Earth.</p1>
<br>
<br>
<img src="https://www.nasa.gov/sites/default/files/thumbnails/image/artists_concept_of_collision_at_hd_172555.jpg" alt="Picture of the Moon colliding with the dwarf planet">
<figcaption>Source: NASA</figcaption>
<br>
<br>
<h2 id = "features">Structures/Features</h2>
<a href = "#maria">Lunar Maria</a> <a href = "#regolith">Lunar Regolith</a> <a href = "#lunarsoil">Lunar Soil</a> <a href = "#crater">Craters</a> <br><br>
<p1 id = "maria"><b>Lunar maria</b> are the large, dark basaltic plains you see on the moon, specifically the side that always faces Earth. If you will, look at the simulation (in view 1) and see the dark spots on the moon? That's the lunar maria. Lunar maria (mare for singular) are also called the oceans of the moon, as it does look like oceans.</p1> <br><br>
<p1 id = "regolith">The <b>lunar regolith</b> is about 4-5 meters thick in mare regions, but could reach 10-15 in highland areas. It contains all sized from large boulders to sub-micron dust particles. Lunar soil is often used interchangably with lunar regolith, however it's only defined as the top layer to the regolith.</p1> <br><br>
<p1 id = "lunarsoil"><b>Lunar soil</b> is a misleading term. Here on Earth, the soil is full of rich organic matter, whereas on the Moon, there is no organic matter. The Lunar soil is defined as the sub-centimeter layer of the lunar regolith. It is not sorted in any way, such as shape, size, or chemistry, unlike Earth, where it is sorted into layers.</p1> <br><br>
<p1 id = "crater"><b>Craters</b> are, in simple terms, a dent caused by a foreign object, or an <b>asteroid</b> colliding with the body the crater is on. Asteroids are pieces of rock left over from the formation of our solar system, with no clear aim, drifting in space. Ocasionally, they get nocked of course and crashes into a something else, such as the Earth. When the asteroid reaches the Earth's atmosphere, it becomes a commonly known name, a <b>meteor.</b> Due to friction and heat generated, most meteors burn up in the atmosphere. Some lucky few manage to reach the surface, and are dubbed <b>meteroites.</b> <br> The moon is an entirely different case however, as there is no atmosphere. The lack of atmosphere results in more asteroids reaching the surface, and creating many more craters. In the model, you can look and see the many craters that are scattered throughout the moon.</p1> <br><br>
<h2 id = "inside">The insides</h2>
<a href = "#comp">Composition</a> <a href = "#inner">Inner composition</a> <br> <br>
<img id = "comp" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Moon_vs_earth_composition.svg/1280px-Moon_vs_earth_composition.svg.png" alt = "43% oxygen, 20% silicon, 19% magnesium, 10% iron, 3% calcium, 3% aluminum, 0.42% chromium, 0.18% titanium and 0.12% manganese." style = "background-color: white;"></img>
<figcaption>Compare the composition of the Earth to the Moon.</figcaption> <br><br>
<p1>The handy picture above tells us what the moon is exactly made of. Similar to Earth, the moon's (rock) composition is <b>mostly made up of oxygen.</b> Other elements such as Aluminum and Silicon are also similar. This is one of the reasons why theories such as the Great Impact Theory exists, due to the suprisingly similar composition between the two astral bodies.</p1> <br> <br>
<img id = "inner" class = "big" src = "https://qph.cf2.quoracdn.net/main-qimg-872ca426f4f0fc92b82ffcca1a8337b5" style = "background-color: white;"></img> <br><br>
<p1>
The moon has multiple layers in it. The first layer would be the <b>crust</b>, similar to Earth. The crust averages to 42 miles in thickness.<br>
Next would be the <b>mantle</b> (sounding familiar?). Like Earth, the mantle is the largest portion, up to 825 miles thick. <br>
To round it all off, it would be the <b>core</b>. It is likely that a core exists, but it would be very small, and is not able to generate it's own magnetic field, like the Earth's core can. It is estimated to be just 1% to 2% of the moon's mass and roughly 420 miles (680 km) wide. It also likely contains mostly iron, like the Earth's core
</p1>
<h2 id = "vocab">Vocabulary</h2>
<ul id="vocablist"></ol>
</ul>
<h2 id = "credits">Credits: </h2>
<p1 id = "credbuttons">
This was a science project made by <a href = "https://github.com/coderz75">Coderz75</a> using the <a href = "https://threejs.org/">Threejs</a> library. A call out to <a href = "https://github.com/actiniumn404">Actiniumn404</a> for css help!. I hope you like it!<br><br>
Many sources was used for this project: <br><br> </p1> <br> <br>
<p1>If you really want, here's it in boring old list form</p1>
<ul id="creditlist"></ol>
</ul>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"></script>
<script src = "https://cdn.jsdelivr.net/gh/mrdoob/three.js@2410ad1a8f5844df00191600eafda59def537830/examples/js/controls/OrbitControls.js"></script>
<script type = "module">
function resetpos(){
moon_dist = camera.position.distanceTo(moon.position);
camera.position.set(moon.position.x + Math.sin(moon.rotation.y + 1.57079632679) * moon_dist, cam_og_pos.y,moon.position.z + Math.cos(moon.rotation.y + 1.57079632679) *moon_dist);
lock = true;
}
function canvas_big(){
canvas_size += 0.01;
onResize()
}
function canvas_small(){
canvas_size -= 0.01;
onResize()
}
var canvas_size = 2/3;
var lock = true;
var frames = 0;
var pause = false;
var moon_time = 0;
var moon_dist = 5;
var textureURL = "https://raw.githubusercontent.com/CoryG89/MoonDemo/master/img/maps/moon.jpg";
var displacementURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/17271/ldem_3_8bit.jpg";
var worldURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/17271/hipp8_s.jpg"
var earthUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Whole_world_-_land_and_oceans_12000.jpg/1200px-Whole_world_-_land_and_oceans_12000.jpg"
var sunURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Solarsystemscope_texture_2k_sun.jpg/800px-Solarsystemscope_texture_2k_sun.jpg?20201026210306";
let credits =
`https://www.nasa.gov/feature/nasa-finds-evidence-two-early-planets-collided-to-form-moon/ | Nasa
https://www.nhm.ac.uk/discover/how-did-the-moon-form.html | Natural History Museum
https://starchild.gsfc.nasa.gov/docs/StarChild/questions/question38.html | Nasa
https://www.britannica.com/science/anorthosite | Britannica
https://en.wikipedia.org/wiki/Lunar_mare | Wikepedia
https://rocksminerals.flexiblelearning.auckland.ac.nz/rocks/breccia.html | University of Aaukland
https://languages.oup.com/google-dictionary-en/ | Dictionary
https://www.nasa.gov/sites/default/files/atoms/files/05_1_snoble_thelunarregolith.pdf | Nasa
https://www.space.com/55-earths-moon-formation-composition-and-orbit.html | Space.com
https://www.brown.edu/news/2022-01-13/magneticmoon | Brown edu
https://solarsystem.nasa.gov/moons/earths-moon/overview/ | Nasa
https://github.com/CoryG89/MoonDemo | Mesh Stuff and reference`;
let vocab =
`Crater | a large, bowl-shaped cavity in the ground or on the surface of a planet or the moon, typically one caused by an explosion or the impact of a meteorite or other celestial body
Meteor | a small body of matter from outer space that enters the earth's atmosphere, becoming incandescent as a result of friction and appearing as a streak of light.
Giant Impact hypothesis | speculates that when Earth was a young planet and just beginning to form, it was hit by another emerging planet named Theia, located nearby.
Fission hypothesis | a rapidly spinning Earth could have cast off the Moon from its outer layers. However, the present-day Earth-Moon system should contain "fossil evidence" of this rapid spin and it does not. Also, this hypothesis does not have a natural explanation for the extra baking the lunar material has received.
Anorthosite | a plutonic rock composed largely of calcic plagioclase.
Maria | Basaltic "oceans" on the moon
Breccia | rock consisting of angular fragments cemented together.
Meteoroid | a small body moving in the solar system that would become a meteor if it entered the earth's atmosphere.
Regolith | fine powdery material that scientists refer to it as “lunar regolith”. Nearly the entire lunar surface is covered with regolith, and bedrock is only visible on the walls of very steep craters.
Weathering | Procoss on Earth that slowly breaks down rocks, absent on the moon
Ejecta | Particles that come out of an explosion
Igneous rock | A type of rock formed by cooled magma
Sedimentary rock | A type of rock, that was formed by other rocks being cemented together.`;
var list = document.getElementById('creditlist');
var creditlist = credits.split("\n")
var button_list = document.getElementById("credbuttons")
for (let i = 0; i < creditlist.length; i++){
let entry = document.createElement('li');
let info = creditlist[i].split(" | ")[0];
let name = creditlist[i].split(" | ")[1];
entry.innerHTML = `<a class = "basic" target="_blank" href = "${info}">${info}</a>`;
button_list.innerHTML += `<a target="_blank" href = "${info}">${name}</a>`;
list.appendChild(entry);
}
var elist = document.getElementById('vocablist');
var vocablist = vocab.split("\n")
for (let i = 0; i < vocablist.length; i++){
let entry = document.createElement('li');
let name = vocablist[i].split(" | ")[0];
let info = vocablist[i].split(" | ")[1];
entry.innerHTML = `<b>${name}</b> - ${info}`;
elist.appendChild(entry);
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, (window.innerWidth * canvas_size) / window.innerHeight, 1, 1000 );
camera.position.normalize().multiplyScalar(2.7)
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = true;
controls.minDistance = 4;
controls.maxDistance = 30;
renderer.setSize( window.innerWidth * canvas_size, window.innerHeight );
var geometry = new THREE.SphereGeometry( 2,500,500);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load( textureURL );
var displacementMap = textureLoader.load( displacementURL );
var worldTexture = textureLoader.load( worldURL );
var earthTexture = textureLoader.load( earthUrl )
var sunTexture = textureLoader.load( sunURL );
var material = new THREE.MeshPhongMaterial (
{ color: 0xffffff ,
map: texture ,
displacementMap: displacementMap,
displacementScale: 0.06,
bumpMap: displacementMap,
bumpScale: 0.1,
reflectivity:0,
shininess :0
}
);
var moon = new THREE.Mesh( geometry, material );
const light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set(-100, 0,50);
scene.add(light);
let sun_material = new THREE.MeshBasicMaterial (
{ color: 0xffff00 ,
map: sunTexture
}
);
let sun_geometry = new THREE.SphereGeometry( 25, 60, 60 );
var sun = new THREE.Mesh( sun_geometry, sun_material );
sun.position.set ( -100, 0, 50 );
scene.add( sun );
let earth_geometry = new THREE.SphereGeometry(8,500,500)
let earth_material = new THREE.MeshPhongMaterial(
{
map: earthTexture,
reflectivity: 10
}
)
var earth = new THREE.Mesh(earth_geometry,earth_material);
earth.position.set(0,0,0)
scene.add(earth)
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.1 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 0, 0 );
scene.add( hemiLight );
var worldGeometry = new THREE.SphereGeometry( 1000,60,60 );
var worldMaterial = new THREE.MeshBasicMaterial (
{ color: 0xffffff ,
map: worldTexture ,
side: THREE.BackSide
}
);
var world = new THREE.Mesh( worldGeometry, worldMaterial );
scene.add( world );
scene.add( moon );
camera.position.z = 5;
var cam_og_pos = new THREE.Vector3();
cam_og_pos.copy(camera.position);
moon.rotation.x = 3.1415*0.02;
moon.rotation.y = 3.1415*1.5;
var side_y = camera.position.y;
document.getElementById("resetpos").addEventListener("click", resetpos);
document.getElementById("canvasBig").addEventListener("click", canvas_big);
document.getElementById("canvasSmall").addEventListener("click", canvas_small);
document.getElementById("pause").addEventListener("click", function(){
if(pause){document.getElementById("pause").innerHTML = "Pause";}
else{document.getElementById("pause").innerHTML = "Unpause";}
pause = !pause;
});
document.getElementById("top").addEventListener("click", function(){
camera.position.set(0,60,0)
});
document.getElementById("fulltop").addEventListener("click", function(){
camera.position.set((earth.position.x - sun.position.x)/2,100,(earth.position.z - sun.position.z)/2)
});
document.getElementById("load").remove();
document.body.appendChild(renderer.domElement, document.body.firstChild);
function animate() {
requestAnimationFrame( animate );
if (camera.position.y != side_y ){
lock = false;
}else {
lock = true;
}
if (!pause){
sun.rotation.y += 0.0001;
world.rotation.x += 0.0005;
earth.rotation.y += 0.01
moon.position.set(Math.sin(moon_time) * 20, 0, Math.cos(moon_time) * 20);
moon.rotation.y = Math.atan2(moon.position.x - earth.position.x, moon.position.z - earth.position.z) + (2*Math.PI)/4;
moon_time += 0.002
if (lock){
camera.position.set(moon.position.x + Math.sin(moon.rotation.y + 1.57079632679) * moon_dist, cam_og_pos.y,moon.position.z + Math.cos(moon.rotation.y + 1.57079632679) *moon_dist);
}
}
camera.lookAt(moon.position.x,moon.position.y,moon.position.z);
controls.target.copy(moon.position)
renderer.render( scene, camera );
frames += 1
}
animate();
function onResize() {
camera.aspect = window.innerWidth * canvas_size / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth * canvas_size, window.innerHeight);
let collection = document.getElementsByClassName("info");
for (let i = 0; i < collection.length; i++) {
collection[i].style.width = ((1-canvas_size) * 100).toString() + "vw";
}
}
window.addEventListener('resize', onResize, false);
</script>
</html>