forked from alurubalakarthikeya/NASA-Space-Apps
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ee781ce
commit 15c3c99
Showing
4 changed files
with
368 additions
and
332 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,174 +1,192 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" | ||
| /> | ||
| <link rel="icon" type="image/png" href="Media/main.png" /> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <title>Galactic TrailBlaze</title> | ||
| </head> | ||
| <body> | ||
| <nav class="nav-bar"> | ||
| <h3>NASA Space</h3> | ||
| <ul> | ||
| <li><a href="about.html">About</a></li> | ||
| <li><a href="NasaTerminal.html">Explore</a></li> | ||
| </ul> | ||
| <i class="fa-solid fa-bars" onclick="openNav()"></i> | ||
| <div id="myNav" class="overlay"> | ||
| <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" | ||
| >×</a | ||
| > | ||
| <div class="overlay-content"> | ||
| <a href="about.html">About</a> | ||
| <a href="NasaTerminal.html">Explore</a> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <header class="side-spacing"> | ||
| <h2 class="side-spacing introduction"> | ||
| Welcome to Space Jumpers, explore the exo-planets with visual | ||
| information | ||
| </h2> | ||
| </header> | ||
|
|
||
| <div class="sign-up-section"> | ||
| <div class="form"> | ||
| <form action="home.html"> | ||
| <fieldset> | ||
| <legend id="signInUp">Sign Up</legend> | ||
| <div class="form-group removeName"> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" name="name" required /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="email">Email:</label> | ||
| <input type="email" id="email" name="email" required /> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" | ||
| /> | ||
| <link rel="icon" type="image/png" href="Media/main.png" /> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <title>Galactic TrailBlaze</title> | ||
| </head> | ||
| <body> | ||
| <nav class="nav-bar"> | ||
| <h3>ExoSphere</h3> | ||
| <ul> | ||
| <li><a href="about.html">About</a></li> | ||
| <li><a href="NasaTerminal.html">Explore</a></li> | ||
| </ul> | ||
| <i class="fa-solid fa-bars" onclick="openNav()"></i> | ||
| <div id="myNav" class="overlay"> | ||
| <a | ||
| href="javascript:void(0)" | ||
| class="closebtn" | ||
| onclick="closeNav()" | ||
| >×</a | ||
| > | ||
| <div class="overlay-content"> | ||
| <a href="about.html">About</a> | ||
| <a href="NasaTerminal.html">Explore</a> | ||
| </div> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="password">Password:</label> | ||
| <input type="password" id="password" name="password" required /> | ||
| </nav> | ||
|
|
||
| <header class="side-spacing"> | ||
| <h2 class="side-spacing introduction"> | ||
| Welcome to Space Jumpers, explore the exo-planets with visual | ||
| information | ||
| </h2> | ||
| </header> | ||
|
|
||
| <div class="sign-up-section"> | ||
| <div class="form"> | ||
| <form action="home.html"> | ||
| <fieldset> | ||
| <legend id="signInUp">Sign Up</legend> | ||
| <div class="form-group removeName"> | ||
| <label for="name">Name:</label> | ||
| <input type="text" id="name" name="name" required /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="email">Email:</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| required | ||
| /> | ||
| </div> | ||
| <div class="form-group"> | ||
| <label for="password">Password:</label> | ||
| <input | ||
| type="password" | ||
| id="password" | ||
| name="password" | ||
| required | ||
| /> | ||
| </div> | ||
| <br /> | ||
| <div class="form-group"> | ||
| <button><a href="home.html">Sign Up</a></button> | ||
| <p id="signOption"> | ||
| Already have an account? | ||
| <a href="signin.html" onclick="signIn()" | ||
| >Sign In</a | ||
| > | ||
| </p> | ||
| </div> | ||
| </fieldset> | ||
| </form> | ||
| </div> | ||
| <br /> | ||
| <div class="form-group"> | ||
| <button><a href="home.html">Sign Up</a></button> | ||
| <p id="signOption"> | ||
| Already have an account? | ||
| <a href="signin.html" onclick="signIn()">Sign In</a> | ||
| </p> | ||
| <div class="earth"> | ||
| <!-- The 3D model will be rendered here --> | ||
| </div> | ||
| </fieldset> | ||
| </form> | ||
| </div> | ||
| <div class="earth"> | ||
| <!-- The 3D model will be rendered here --> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> | ||
| <script> | ||
| function openNav() { | ||
| document.getElementById("myNav").style.width = "100%"; | ||
| } | ||
|
|
||
| function closeNav() { | ||
| document.getElementById("myNav").style.width = "0%"; | ||
| } | ||
|
|
||
| // Scene setup | ||
| const scene = new THREE.Scene(); | ||
| const camera = new THREE.PerspectiveCamera( | ||
| 75, | ||
| window.innerWidth / window.innerHeight, | ||
| 0.1, | ||
| 5000 | ||
| ); | ||
| const renderer = new THREE.WebGLRenderer({ | ||
| antialias: true, | ||
| alpha: true, | ||
| }); | ||
| renderer.setClearColor(0x000000, 0); // Set clear color to transparent | ||
|
|
||
| // Append the renderer to the earth div instead of body | ||
| const earthDiv = document.querySelector(".earth"); | ||
| earthDiv.appendChild(renderer.domElement); | ||
|
|
||
| // Set renderer size based on the earth div dimensions | ||
| renderer.setSize(earthDiv.clientWidth, earthDiv.clientHeight); | ||
| camera.aspect = earthDiv.clientWidth / earthDiv.clientHeight; | ||
| camera.updateProjectionMatrix(); | ||
|
|
||
| // Orbit Controls with damping | ||
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | ||
| controls.enableDamping = true; | ||
| controls.dampingFactor = 0.05; | ||
| controls.screenSpacePanning = false; | ||
|
|
||
| // Ambient Light | ||
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | ||
| scene.add(ambientLight); | ||
|
|
||
| // Directional Lights | ||
| const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5); | ||
| directionalLight1.position.set(5, 10, 7); | ||
| scene.add(directionalLight1); | ||
|
|
||
| const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5); | ||
| directionalLight2.position.set(-5, 10, -7); | ||
| scene.add(directionalLight2); | ||
|
|
||
| // Variable to store the loaded model | ||
| let loadedModel; | ||
|
|
||
| // Load GLTF model | ||
| const loader = new THREE.GLTFLoader(); | ||
| loader.load( | ||
| "3D%20Models/stylized_planet/scene.gltf", | ||
| function (gltf) { | ||
| loadedModel = gltf.scene; | ||
| scene.add(loadedModel); | ||
| }, | ||
| undefined, | ||
| function (error) { | ||
| console.error(error); | ||
| } | ||
| ); | ||
|
|
||
| // Camera positioning | ||
| camera.position.set(0, 0, 1.5); | ||
| camera.lookAt(0, 0, 0); | ||
|
|
||
| // Animation loop | ||
| function animate() { | ||
| requestAnimationFrame(animate); | ||
|
|
||
| // Rotate the loaded model if it exists | ||
| if (loadedModel) { | ||
| loadedModel.rotation.y += 0.005; // Adjust the rotation speed as needed | ||
| } | ||
|
|
||
| controls.update(); | ||
| renderer.render(scene, camera); | ||
| } | ||
| animate(); | ||
|
|
||
| // Handle window resize | ||
| window.addEventListener("resize", () => { | ||
| const width = earthDiv.clientWidth; | ||
| const height = earthDiv.clientHeight; | ||
| renderer.setSize(width, height); | ||
| camera.aspect = width / height; | ||
| camera.updateProjectionMatrix(); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </div> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> | ||
| <script> | ||
| function openNav() { | ||
| document.getElementById("myNav").style.width = "100%"; | ||
| } | ||
|
|
||
| function closeNav() { | ||
| document.getElementById("myNav").style.width = "0%"; | ||
| } | ||
|
|
||
| // Scene setup | ||
| const scene = new THREE.Scene(); | ||
| const camera = new THREE.PerspectiveCamera( | ||
| 75, | ||
| window.innerWidth / window.innerHeight, | ||
| 0.1, | ||
| 5000 | ||
| ); | ||
| const renderer = new THREE.WebGLRenderer({ | ||
| antialias: true, | ||
| alpha: true, | ||
| }); | ||
| renderer.setClearColor(0x000000, 0); // Set clear color to transparent | ||
|
|
||
| // Append the renderer to the earth div instead of body | ||
| const earthDiv = document.querySelector(".earth"); | ||
| earthDiv.appendChild(renderer.domElement); | ||
|
|
||
| // Set renderer size based on the earth div dimensions | ||
| renderer.setSize(earthDiv.clientWidth, earthDiv.clientHeight); | ||
| camera.aspect = earthDiv.clientWidth / earthDiv.clientHeight; | ||
| camera.updateProjectionMatrix(); | ||
|
|
||
| // Orbit Controls with damping | ||
| const controls = new THREE.OrbitControls( | ||
| camera, | ||
| renderer.domElement | ||
| ); | ||
| controls.enableDamping = true; | ||
| controls.dampingFactor = 0.05; | ||
| controls.screenSpacePanning = false; | ||
|
|
||
| // Ambient Light | ||
| const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); | ||
| scene.add(ambientLight); | ||
|
|
||
| // Directional Lights | ||
| const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1.5); | ||
| directionalLight1.position.set(5, 10, 7); | ||
| scene.add(directionalLight1); | ||
|
|
||
| const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1.5); | ||
| directionalLight2.position.set(-5, 10, -7); | ||
| scene.add(directionalLight2); | ||
|
|
||
| // Variable to store the loaded model | ||
| let loadedModel; | ||
|
|
||
| // Load GLTF model | ||
| const loader = new THREE.GLTFLoader(); | ||
| loader.load( | ||
| "3D%20Models/stylized_planet/scene.gltf", | ||
| function (gltf) { | ||
| loadedModel = gltf.scene; | ||
| scene.add(loadedModel); | ||
| }, | ||
| undefined, | ||
| function (error) { | ||
| console.error(error); | ||
| } | ||
| ); | ||
|
|
||
| // Camera positioning | ||
| camera.position.set(0, 0, 1.5); | ||
| camera.lookAt(0, 0, 0); | ||
|
|
||
| // Animation loop | ||
| function animate() { | ||
| requestAnimationFrame(animate); | ||
|
|
||
| // Rotate the loaded model if it exists | ||
| if (loadedModel) { | ||
| loadedModel.rotation.y += 0.005; // Adjust the rotation speed as needed | ||
| } | ||
|
|
||
| controls.update(); | ||
| renderer.render(scene, camera); | ||
| } | ||
| animate(); | ||
|
|
||
| // Handle window resize | ||
| window.addEventListener("resize", () => { | ||
| const width = earthDiv.clientWidth; | ||
| const height = earthDiv.clientHeight; | ||
| renderer.setSize(width, height); | ||
| camera.aspect = width / height; | ||
| camera.updateProjectionMatrix(); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
| <!-- Developed by Arji Jethin & Aluru Bala Karthikeya --> |
Oops, something went wrong.