-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49 from sidharth2829/Adding-3D-Visualizations
Adding 3D visualizations
- Loading branch information
Showing
13 changed files
with
923 additions
and
0 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
3 changes: 3 additions & 0 deletions
3
Pages/3D-Visualizations/sources/button-5/.vscode/settings.json
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 |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| #container3D canvas { | ||
| width: 100vw ; | ||
| height: 50vh; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| margin-top: 10vh; | ||
| } | ||
|
|
||
|
|
||
| #loading-overlay { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white background */ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 999; /* make sure it's on top of everything */ | ||
| } | ||
|
|
||
| #loading-overlay img { | ||
| width: 30rem; /* adjust the size of the loading image */ | ||
| height: 24rem; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Virtuo Learn</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="stylesheet" href="media-queries.css"> | ||
| <link rel="icon" type="image/x-icon" href="../HomePage/assets/logo.png"> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| </head> | ||
| <body> | ||
| <!-- nav bar --> | ||
| <nav> | ||
| <div class="container main-nav flex"> | ||
| <a href="../../../../index.html" class="company-logo"> | ||
| <img src="./assets/asset 41.png" alt="company logo"> | ||
| </a> | ||
| <div class="nav-links" id="nav-links"> | ||
| <ul class="nav-menu"> | ||
| <li><a href="../../../About-Us/index.html" class="hover-link">About Us</a></li> | ||
| <li><a href="../../../Simulation/index.html" class="hover-link">Simulations</a></li> | ||
| <li><a href="../../../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li> | ||
| <li><a href="../../../Quizes/index.html" class="hover-link">Quizes</a></li> | ||
| <li><a href="../../../Videos/index.html" class="hover-link">Videos</a></li> | ||
| <li><a href="../../../Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="hamburger"> | ||
| <span class="bar"></span> | ||
| <span class="bar"></span> | ||
| <span class="bar"></span> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- header section --> | ||
| <header> | ||
| <div class="header"> | ||
| <h1>Deoxyribonucleic acid(DNA)</h1> | ||
| </div> | ||
| </header> | ||
| <!-- 3D Section --> | ||
| <main> | ||
| <div id="loading-overlay" style="display: flex"> | ||
| <img src="./assets/dna.jpg" alt="Loading..."> | ||
| </div> | ||
| <div id="container3D"></div> | ||
| </main> | ||
|
|
||
| <script type="module" src="js/main.js"></script> | ||
|
|
||
| <!-- footer --> | ||
| <footer> | ||
| <div class="footer-content"> | ||
| <a href="#" class="company-logo footer-logo"> | ||
| <img src="./assets/asset 41.png" alt="company logo"> | ||
| </a> | ||
| <p>Developed By Jayesh Batra</p> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <script src="https://kit.fontawesome.com/c1fc3d2826.js" crossorigin="anonymous"></script> | ||
|
|
||
| <script> | ||
| const hamburger = document.querySelector(".hamburger"); | ||
| const navMenu = document.querySelector(".nav-menu"); | ||
|
|
||
| hamburger.addEventListener("click", () => { | ||
| hamburger.classList.toggle("active"); | ||
| navMenu.classList.toggle("active"); | ||
| }) | ||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
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 |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js"; | ||
| import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js"; | ||
| import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js"; | ||
|
|
||
|
|
||
| const scene = new THREE.Scene(); | ||
|
|
||
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | ||
|
|
||
| let object; | ||
|
|
||
| let controls; | ||
|
|
||
| const loader = new GLTFLoader(); | ||
|
|
||
| loader.load( | ||
| `models/model/scene.gltf`, | ||
| function (gltf) { | ||
| object = gltf.scene; | ||
| scene.add(object); | ||
| }, | ||
| function (xhr) { | ||
| console.log((xhr.loaded / xhr.total * 100) + '% loaded'); | ||
| }, | ||
| function (error) { | ||
| console.error(error); | ||
| } | ||
| ); | ||
|
|
||
| const renderer = new THREE.WebGLRenderer({ alpha: true }); // Alpha true transparent background ke liye | ||
| renderer.setSize(window.innerWidth, window.innerHeight); | ||
|
|
||
| document.getElementById("container3D").appendChild(renderer.domElement); | ||
|
|
||
| camera.position.set(7, 0, -10); | ||
|
|
||
| const topLight = new THREE.DirectionalLight(0xffffff, 1); // (color, intensity) | ||
| topLight.position.set(500, 500, 500) //top-left-ish | ||
| topLight.castShadow = true; | ||
| scene.add(topLight); | ||
|
|
||
| const ambientLight = new THREE.AmbientLight(0x333333,5); | ||
| scene.add(ambientLight); | ||
|
|
||
| controls = new OrbitControls(camera, renderer.domElement); | ||
|
|
||
| function animate() { | ||
| requestAnimationFrame(animate); | ||
| renderer.render(scene, camera); | ||
| } | ||
|
|
||
| window.addEventListener("resize", function () { | ||
| camera.aspect = window.innerWidth / window.innerHeight; | ||
| camera.updateProjectionMatrix(); | ||
| renderer.setSize(window.innerWidth, window.innerHeight); | ||
| }); | ||
|
|
||
| animate(); | ||
|
|
||
|
|
||
|
|
||
| // Add a reference to the loading overlay | ||
| const loadingOverlay = document.getElementById('loading-overlay'); | ||
|
|
||
| // Show the loading overlay initially | ||
| loadingOverlay.style.display = 'flex'; | ||
|
|
||
| loader.load( | ||
| `models/model/scene.gltf`, | ||
| function (gltf) { | ||
| object = gltf.scene; | ||
| scene.add(object); | ||
|
|
||
| // Hide the loading overlay when the model is loaded | ||
| loadingOverlay.style.display = 'none'; | ||
| }, | ||
| function (xhr) { | ||
| console.log((xhr.loaded / xhr.total * 100) + '% loaded'); | ||
| }, | ||
| function (error) { | ||
| console.error(error); | ||
|
|
||
| // Hide the loading overlay in case of an error | ||
| loadingOverlay.style.display = 'none'; | ||
| } | ||
| ); | ||
|
|
98 changes: 98 additions & 0 deletions
98
Pages/3D-Visualizations/sources/button-5/media-queries.css
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 |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| @media screen and (max-width: 1030px) { | ||
|
|
||
| h3 { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .main-nav { | ||
| overflow: initial; | ||
| } | ||
|
|
||
| .hamburger{ | ||
| display: block; | ||
| } | ||
|
|
||
| .hamburger.active .bar:nth-child(2){ | ||
| opacity: 0; | ||
| } | ||
| .hamburger.active .bar:nth-child(1){ | ||
| transform: translateY(8px) rotate(45deg); | ||
| } | ||
| .hamburger.active .bar:nth-child(3){ | ||
| transform: translateY(-8px) rotate(-45deg); | ||
| } | ||
|
|
||
| .nav-menu{ | ||
| position: absolute; | ||
| top: -100%; | ||
| left: 0; | ||
| gap: 0; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| text-align: center; | ||
| transition: 0.3s; | ||
| z-index: 1; | ||
| /* background-color: aqua; */ | ||
| /* max-height: 10vh; */ | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| background: rgba(236, 235, 255, 0.2); | ||
| /* border-radius: 16px; */ | ||
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | ||
| backdrop-filter: blur(3.3px); | ||
| -webkit-backdrop-filter: blur(3.3px); | ||
| border: 1px solid rgba(236, 235, 255, 0.3); | ||
|
|
||
| } | ||
| .hover-link{ | ||
| margin: 16px 0; | ||
| } | ||
| .nav-menu.active{ | ||
| top: 13%; | ||
| } | ||
|
|
||
| .course { | ||
| flex-direction: column; | ||
| height: 60vh; | ||
| } | ||
| .course-preview { | ||
| width: 70vw; | ||
| } | ||
| .course-info { | ||
| width: 100%; | ||
| height: 200%; | ||
| } | ||
| .card-btn { | ||
| bottom: 5vh; | ||
| right: 5vw; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 479px) { | ||
| :root { | ||
| --padding-inline-section: 10px; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .center{ | ||
| position: relative; | ||
| left: 0vw; | ||
| } | ||
|
|
||
| } |
11 changes: 11 additions & 0 deletions
11
Pages/3D-Visualizations/sources/button-5/models/model/license.txt
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 |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| Model Information: | ||
| * title: DNA | ||
| * source: https://sketchfab.com/3d-models/dna-60e95170b37549e3b45ee490b74bb112 | ||
| * author: Holoxica (https://sketchfab.com/holoxica) | ||
|
|
||
| Model License: | ||
| * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) | ||
| * requirements: Author must be credited. Commercial use is allowed. | ||
|
|
||
| If you use this 3D model in your project be sure to copy paste this credit wherever you share it: | ||
| This work is based on "DNA" (https://sketchfab.com/3d-models/dna-60e95170b37549e3b45ee490b74bb112) by Holoxica (https://sketchfab.com/holoxica) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) |
Binary file not shown.
Oops, something went wrong.