Space-Explorer/index.html at master · STEMpowering/Space-Explorer · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Space Explorer</title>

        <!-- Babylon.js -->
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src='https://cdn.babylonjs.com/cannon.js'></script>

        <!-- our own dependencies -->
        <script src='transitions.js'></script>
        <script src='orbit-helpers.js'></script>
        <script src='cannon.js'></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #canvas {
                width: 100%;
                touch-action: none;
            }
        </style>
        <link rel='stylesheet' href='index.css'>
    </head>
<body>
    <div id='game'>
        <div id='ui'></div>
        <div id='plainfo'></div>
        <canvas id="canvas"></canvas>
    </div>
    <script src='orbit-activity.js'></script>
    <script>
        //var canvas = document.getElementById("canvas");

        //var engine = null;
        var scene = null;
        var sceneToRender = null;
        //var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = BABYLON.Color3.Black();

            let skydome = new BABYLON.MeshBuilder.CreateSphere('skydome', { diameter: 10000 }, scene);
            let axis = new BABYLON.Vector3(0,0,1);
            skydome.rotationQuaternion = new BABYLON.Quaternion.RotationAxis(axis, Math.PI / 2);

            let spacemat = new BABYLON.StandardMaterial('spacemat', scene);
            spacemat.emissiveTexture = new BABYLON.Texture('textures/space-dome.jpg', scene);
            spacemat.backFaceCulling = false;
            skydome.material = spacemat;

            // Setup camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
            sceneO.mainCamera = camera;
            camera.setPosition(new BABYLON.Vector3(0, 1000, -1000));
            camera.attachControl(canvas, true);

            // sun sphere - size decreased by 20x
            var sun = BABYLON.MeshBuilder.CreateSphere("Sun", {diameter: 69.635, diameterX: 69.635}, scene);
            sceneO.sun = sun;
        	sun.position = new BABYLON.Vector3(0, 0, 0);
            var material = new BABYLON.StandardMaterial("sunmaterial", scene);
            sun.material = material;
            sun.material.emissiveColor = new BABYLON.Color3(1, 1, 0);

            // sun light
            var light0 = new BABYLON.PointLight("Omni0", sun.position, scene);
            light0.diffuse = new BABYLON.Color3(1, 1, 1);


        	var ref = BABYLON.Mesh.CreateGround("gnd", 40, 40, 16, scene);
        	ref.material = new BABYLON.StandardMaterial("texture1", scene);
        	ref.material.wireframe = true;

        	// earth
            var earth = BABYLON.MeshBuilder.CreateSphere("Earth", {diameter: 12.7, diameterX: 12.7}, scene);
        	earth.position.x = 4;
            earth.parent = sun;
            earth.info = 'Earth is the fifth largest planet of our solar system and has one moon. Being another rocky and terrestrial planet, it has a solid and active surface with mountains, valleys, plains and many more. It is the only planet where water is liquid, covering about 70% of the surface.The other planets are too hot or too cold for an ideal lifestyle for us humans.';

        	var earthMaterial = new BABYLON.StandardMaterial("earthSurface", scene);
            earthMaterial.diffuseTexture = new BABYLON.Texture("textures/earth.jpg", scene);
        	earth.material = earthMaterial
            earth.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            earth.material.specularColor = new BABYLON.Color3(0, 0, 0);

        	// moon
            var moon = BABYLON.MeshBuilder.CreateSphere("Moon", {diameter: 3.4, diameterX: 3.4}, scene);
        	//moon.translate(earth.position, 5, BABYLON.Space.WORLD);
        	moon.position.x = 50;
        	moon.bakeCurrentTransformIntoVertices();
        	moon.position.x = 0;
        	//moon.parent = earth;

            // mars
            var mars = BABYLON.MeshBuilder.CreateSphere("Mars", {diameter: 6.779, diameterX: 6.779}, scene);
        	mars.position.x = 4;
            mars.parent = sun;
            mars.info = 'Mars, the next possible candidate for a future human habitation, is Earth’s closest space neighbour. Mars also has the highest mountain in the solar system named Olympus Mons, three times the size of Mount Everest. Unlike Earth, Mars has two moons, Phobos and Deimos. At this very second, there are two rovers on the surface of Mars and six spacecraft orbiting Mars, helping with the discovery of water and other evidence of biological life on that planet.';

            var marsMaterial = new BABYLON.StandardMaterial("marsSurface", scene);
            marsMaterial.diffuseTexture = new BABYLON.Texture("textures/mars.jpg", scene);
        	mars.material = marsMaterial
            mars.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            mars.material.specularColor = new BABYLON.Color3(0, 0, 0);

            // mercury
            var mercury = BABYLON.MeshBuilder.CreateSphere("Mercury", {diameter: 4.8794, diameterX: 4.8794}, scene);
        	mercury.position.x = 4;
            mercury.parent = sun;
            mercury.info = 'Mercury is the smallest and closest planet to the sun in our solar system being a little bigger than Earth’s moon. It is so small that it is as wide as the Atlantic Ocean and 18 of them would fit into the Earth. Mercury likes to keep things simple, it has a solid surface with no atmosphere and it doesn’t have any moons. This planet spins around slowly compared to Earth, so one day lasts a long time. Mercury takes 59 Earth days to make one full rotation on its axis, however, it speeds through space with 50km per second/31 miles per second. A year on Mercury goes by fast as it is the closest planet to the sun, completing one revolution around the sun in just 88 Earth days.';

        	var mercuryMaterial = new BABYLON.StandardMaterial("mercurySurface", scene);
            mercuryMaterial.diffuseTexture = new BABYLON.Texture("textures/mercury.jpg", scene);
        	mercury.material = mercuryMaterial
            mercury.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            mercury.material.specularColor = new BABYLON.Color3(0, 0, 0);

            //Venus
            var venus = BABYLON.MeshBuilder.CreateSphere("Venus", {diameter: 12.1, diameterX: 12.1}, scene);
        	venus.position.x = 4;
            venus.parent = sun;
            venus.info = 'Venus is the next planet from the Sun after Mercury. Just like Mercury, it is a rocky planet with an atmosphere (air) around it, but it is a lot thicker than Earth’s, filled with carbon dioxide and clouds made of sulfuric acid. Given that Venus is not the closest to the sun, it is the hottest planet and has an average temperature of 460°C. It is about the same size as Earth, however a day in Venus takes 243 earth days and It takes 225 earth days to travel around the Sun. So interestingly, a single day would take longer than a year in Venus.';

        	var venusMaterial = new BABYLON.StandardMaterial("venusSurface", scene);
            venusMaterial.diffuseTexture = new BABYLON.Texture("textures/venus.jpg", scene);
        	venus.material = venusMaterial
            venus.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            venus.material.specularColor = new BABYLON.Color3(0, 0, 0);

            //Venus
            var jupiter = BABYLON.MeshBuilder.CreateSphere("Jupiter", {diameter: 139.82, diameterX: 139.82}, scene);
        	jupiter.position.x = 4;
            jupiter.parent = sun;

        	var jupiterMaterial = new BABYLON.StandardMaterial("jupiterSurface", scene);
            jupiterMaterial.diffuseTexture = new BABYLON.Texture("textures/jupiter.jpg", scene);
        	jupiter.material = jupiterMaterial
            jupiter.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            jupiter.material.specularColor = new BABYLON.Color3(0, 0, 0);
            jupiter.info = 'Jupiter is the first planet past the asteroid belt and the largest planet in the solar system. Its biggest feature is the “Great Red Spot”, a very large storm ongoing for about 350 years. It is so big that you could fit around 1321 Earths inside Jupiter and it has 66 moons, one of them being bigger than the planet Mercury. As it is big and far away from the sun, it takes around 12 earth years for the planet to revolve around the sun once. Some people even consider it a failed star since it is similar to the sun as it has swirling gases and liquids such as 90% hydrogen and 10% helium.';

            //Saturn
            var saturn = BABYLON.MeshBuilder.CreateSphere("Saturn", {diameter: 116.46, diameterX: 116.46}, scene);
        	saturn.position.x = 4;
            saturn.parent = sun;
            saturn.info = 'We know Saturn for its large and beautiful rings made of groups/chunks of ice and rock. Like Jupiter, it is mostly a ball of hydrogen and helium. It was first discovered with the telescope in 1610 by Galileo. People also refer to it as one of the ‘gas giants’ like Jupiter and takes 29.5 Earth years to travel around the sun. But for the most part, it is still not fully discovered like the other planets in our solar system.';

        	var saturnMaterial = new BABYLON.StandardMaterial("saturnSurface", scene);
            saturnMaterial.diffuseTexture = new BABYLON.Texture("textures/saturn.jpg", scene);
        	saturn.material = saturnMaterial
            saturn.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            saturn.material.specularColor = new BABYLON.Color3(0, 0, 0);

            //Uranus
            var uranus = BABYLON.MeshBuilder.CreateSphere("Uranus", {diameter: 49.244, diameterX: 49.244}, scene);
        	uranus.position.x = 4;
            uranus.parent = sun;
            uranus.info = 'Uranus is the second farthest planet and is the coldest planet in the solar system with an average temperature of -220°C and it also rolls instead of rotates to create days. Due to all this weird movement, it has 20 year long seasons, summer and winter each take 21 years at the north and south poles. On top of all those weird facts, Uranus appears blue because of its gases. It is another ‘gas giant’ and it is relatively large as it can fit 63 Earths inside of it, but not nearly as big as both Jupiter and Saturn. Uranus is big and far from the sun, and because of that, it takes 84 years to orbit the Sun.';

        	var uranusMaterial = new BABYLON.StandardMaterial("uranusSurface", scene);
            uranusMaterial.diffuseTexture = new BABYLON.Texture("textures/uranus.jpg", scene);
        	uranus.material = uranusMaterial
            uranus.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            uranus.material.specularColor = new BABYLON.Color3(0, 0, 0);

            //Neptune
            var neptune = BABYLON.MeshBuilder.CreateSphere("Neptune", {diameter: 50.724, diameterX: 50.724}, scene);
        	neptune.position.x = 4;
            neptune.parent = sun;
            neptune.info = 'Neptune is the farthest planet from the Sun and takes 165 years to orbit around the sun. It is the last and smallest of the four ‘gas giants’, being able to fit 58 earths. It is composed of the same gases that make up Uranus with a thick fog of water, ammonia and methane and its winds are nine times stronger than Earth’s could ever be.';

        	var neptuneMaterial = new BABYLON.StandardMaterial("neptuneSurface", scene);
            neptuneMaterial.diffuseTexture = new BABYLON.Texture("textures/neptune.jpg", scene);
        	neptune.material = neptuneMaterial
            neptune.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
            neptune.material.specularColor = new BABYLON.Color3(0, 0, 0);

            let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
            advancedTexture.isForeground = true;
            sceneO.advTex = advancedTexture;

            //advancedTexture
            /*var UiPanel02 = new BABYLON.GUI.StackPanel("horizontal");
            UiPanel02.isVertical = false;
            UiPanel02.top = "30%";f
            UiPanel02.width = "360px";
            UiPanel02.height = "160px";
            UiPanel02.fontSize = "14px";
            UiPanel02.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            UiPanel02.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
            advancedTexture.addControl(UiPanel02);*/

            // Animations
            var alpha = Math.PI;
            var mars_alpha = Math.PI;
            var mercury_alpha = Math.PI;
            var venus_alpha = Math.PI;
            var jupiter_alpha = Math.PI;
            var saturn_alpha = Math.PI;
            var uranus_alpha = Math.PI;
            var neptune_alpha = Math.PI;

            scene.beforeRender = function () {
        		earth.position = new BABYLON.Vector3(200 * Math.sin(alpha), earth.parent.position.y, 200 * Math.cos(alpha));
        		earth.rotation.y += .003;

        		moon.position = earth.position;
        		moon.rotation.y -= .1;

                mars.position = new BABYLON.Vector3(300 * Math.sin(mars_alpha), mars.parent.position.y, 300 * Math.cos(mars_alpha));
        		mars.rotation.y += .002;

                mercury.position = new BABYLON.Vector3(-75 * Math.sin(mercury_alpha), mercury.parent.position.y, -75 * Math.cos(mercury_alpha));
        		mercury.rotation.y += .0067;

                venus.position = new BABYLON.Vector3(-125* Math.sin(venus_alpha), venus.parent.position.y, -125 * Math.cos(venus_alpha));
        		venus.rotation.y += .0067;

                jupiter.position = new BABYLON.Vector3(-450* Math.sin(jupiter_alpha), jupiter.parent.position.y, -450 * Math.cos(jupiter_alpha));
        		jupiter.rotation.y += .0067;

                saturn.position = new BABYLON.Vector3(650* Math.sin(saturn_alpha), saturn.parent.position.y, 650 * Math.cos(saturn_alpha));
        		saturn.rotation.y -= .0067;

                uranus.position = new BABYLON.Vector3(-750* Math.sin(uranus_alpha), uranus.parent.position.y, -750 * Math.cos(uranus_alpha));
        		uranus.rotation.y -= .0067;

                neptune.position = new BABYLON.Vector3(-850* Math.sin(neptune_alpha), neptune.parent.position.y, -850 * Math.cos(neptune_alpha));
        		neptune.rotation.y -= .0067;

        		// moon.position = new BABYLON.Vector3(5 * Math.sin(alpha-.8), moon.parent.position.y, 5 * Math.cos(alpha-.8));

        		alpha += 0.005;
                mars_alpha += 0.0025;
                mercury_alpha += 0.05;
                venus_alpha += 0.017;
                jupiter_alpha += 0.0004;
        		saturn_alpha += 0.00017;
                uranus_alpha += 0.0000595;
                neptune_alpha += 0.0000303;

        		// spin
        //		earth.rotate(BABYLON.Axis.Y, 0.05, BABYLON.Space.WORLD);
        //		earth.rotate(BABYLON.Axis.Y, 0.05, BABYLON.Space.LOCAL);
        //		moon.rotate(BABYLON.Axis.Y, -0.05, BABYLON.Space.LOCAL);
            };

            return scene;
        }

    //var engine;
    //engine = createDefaultEngine();
    //To catch any errors mid game
    /*
    try {
    engine = createDefaultEngine();
    } catch(e) {
    console.log("the available createEngine function failed. Creating the default engine instead");
    engine = createDefaultEngine();
    }*/

        //if (!engine) throw 'engine should not be null.';
        sceneO.main = createScene();
        sceneO.scene = sceneO.main;

        engine.runRenderLoop(function () {
            if (sceneO.scene) {
                sceneO.scene.render();
            }
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
    <script src='main-screen.js'></script>
</body>
</html>