Solar_System_Three.js/index.html at main · milevk2/Solar_System_Three.js · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absrd Three.js - Milev</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    <link rel="stylesheet" href="/assets/css/responsive.css">
</head>

<body>

    <audio autoplay id="spaceMusic">

        <source src="./assets/music/spacemusic.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <div class="main">

        <div class="information fullScreen" id="prompt">

            <p>
                Choose the device you are using the application on:
            </p>

            <button id="desktop" class="greenBtn"><i class="fa-solid fa-computer"></i> Desktop (PC)</button>
            <button id="touch-screen" class="blackBtn"><i class="fa-solid fa-mobile-screen"></i> Touch screen</button>

        </div>
        <canvas class="webgl"></canvas>

        <span id="mercury" class="information">
            <h2>Mercury</h2>
            <p>
                Mercury, the first planet from the Sun and the smallest in the Solar System, is named after the Roman
                god Mercurius, who is the god of commerce, communication, and the messenger of the gods. Classified as a
                terrestrial planet, it shares roughly the same surface gravity as Mars.
            </p>
        </span>

        <span id="venus" class="information">
            <h2>Venus</h2>
            <p>
                Venus, the second planet from the Sun, is a rocky planet with the densest atmosphere among all rocky
                bodies in the Solar System. It closely resembles Earth in mass and size, orbiting inferiorly inside
                Earth's orbit. Venus frequently appears as either a "morning star" or an "evening star" in Earth's sky.
            </p>
        </span>

        <span id="earth" class="information">
            <h2>Earth</h2>
            <p>
                Earth, the third planet from the Sun, is known as the sole celestial body supporting life. It is
                characterized by its vast reserves of water, rendering it a water-dominated world. The extensive global
                ocean covers approximately 70.8% of Earth's surface.
            </p>
        </span>

        <span id="mars" class="information">
            <h2>Mars</h2>
            <p>
                Mars, the fourth planet from the Sun, boasts an orange-red surface due to its covering of iron(III)
                oxide dust, earning it the moniker "the Red Planet". Notable for its brightness in Earth's sky, Mars is
                frequently observed through telescopes due to its high-contrast albedo features. econd smallest planet
                in the Solar System with a diameter of 6,779 km.
            </p>
        </span>

        <span id="jupiter" class="information">
            <h2>Jupiter</h2>
            <p>
                Jupiter, the fifth planet from the Sun and the largest in the Solar System, is a colossal gas giant. Its
                mass surpasses that of all other planets combined by more than two and a half times, yet remains less
                than one one-thousandth the mass of the Sun.
            </p>
        </span>

        <span id="saturn" class="information">
            <h2>Saturn</h2>
            <p>
                Saturn, the sixth planet from the Sun and the Solar System's second-largest, following Jupiter, is a
                massive gas giant with an average radius approximately nine-and-a-half times that of Earth. Despite
                having only one-eighth the average density of Earth, it boasts over 95 times Earth's mass.
            </p>
        </span>

        <span id="uranus" class="information">
            <h2>Uranus</h2>
            <p>
                Uranus, the seventh planet from the Sun, is a cyan-colored ice giant composed primarily of water,
                ammonia, and methane. These elements exist in a supercritical phase known as 'ice' or volatiles in
                astronomical terms.
            </p>
        </span>

        <span id="neptune" class="information">
            <h2>Neptune</h2>
            <p>
                Neptune, the eighth and most distant recognized planet from the Sun, ranks as the fourth-largest planet
                in terms of diameter and the third-most massive. With a mass 17 times that of Earth, it slightly
                outweighs its fellow ice giant, Uranus.
            </p>
        </span>

        <span id="pluto" class="information">
            <h2>Pluto</h2>
            <p>
                Pluto is a dwarf planet situated in the Kuiper belt, a ring of
                celestial bodies orbiting beyond Neptune. While being the ninth-largest object and tenth-most-massive
                directly orbiting the Sun, it holds a distinct place in the Solar System's vast expanse.
            </p>
        </span>

        <span id="freeLook" class="information flexColumn">
            <p>
                Now feel free to explore the solar system by yourself!
                Use the mouse's scroll to zoom in/out, and change direction with screen sliding.
            </p>
            <button id="confirm" class="greenBtn">Let's go!</button>
            <button id="aboutBtn" class="blackBtn">About</button>
        </span>

        <span id="aboutInfo" class="information flexColumn">

            <h2>Solar System made with Three.js</h2>

            <p>
                I managed to create this project in
                around 5 days starting with 0 knowledge of Three.js . It was such a huge challenge for me, but I did it
                with so much love for programming and for Space and astronomy so I dedicate this project to all of my
                friends who are interested in these topics. Let your dreams be infinite like the Cosmos!
            </p>
            <p>
                This project has been created as a portfolio project for showcasing my skills and understanding on
                integration of a third-party libraries to my projects, code-structure, code readability, code logic
                separation and of other fundamental skills related to html, css and javascript. I dare to say I learned
                so many new things during the development process, which therefore left me really satisfied.
            </p>

            <p>
                I want to thank to www.absrd.co for motivating me to complete this challenge as this project has been
                prepared as a part of the interview process.
            </p>

            <a href="https://github.com/milevk2/Solar_System_Three.js" target="_blank">Link to GitHub</a>
            <button id="aboutCloseBtn" class="greenBtn">Close</button>
        </span>
    </div>

    <script type="module" src="./dist/bundle.js"></script>
    <script>
        let audio = document.getElementById("spaceMusic");
        audio.loop = true;
        audio.volume = 0.2;
    </script>

</body>

</html>