divyap/thob-capability-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add jupiter texture and edge case switcher for week 3 task 2 in vanilla

Browse Source
This commit is contained in:
divyap 2026-04-12 12:24:55 +05:30
parent 12c3969acd
commit 167296da2e
3 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Week-3/Task-2/vanilla/index.html
View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<title>Task 2 — Texture / Surface Variant Switcher</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
@ -10,6 +11,7 @@
<button data-variant="earth" class="active">Earth</button>
<button data-variant="moon">Moon</button>
<button data-variant="sun">Sun</button>
<button data-variant="jupiter">Jupiter</button>
</div>
<script type="module" src="./main.js"></script>

3
Week-3/Task-2/vanilla/main.js
View File

@ -23,7 +23,8 @@ const loader = new THREE.TextureLoader();
const textures = {
earth: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&s'),
moon: loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROh1go667NHsMdzLyvI-0tt9Mn0eugRp0xhQ&s'),
sun: loader.load('https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg')
sun: loader.load('https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg'),
jupiter: loader.load('https://www.shutterstock.com/image-vector/vector-texture-map-spherical-surface-260nw-2473415409.jpg')
};
const material = new THREE.MeshStandardMaterial({

42
Week-3/Task-2/vanilla/style.css Normal file
View File

@ -0,0 +1,42 @@
body {
margin: 0;
overflow: hidden;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#controls {
position: absolute;
top: 20px;
left: 20px;
display: flex;
gap: 12px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 16px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
button {
padding: 10px 18px;
border: none;
border-radius: 8px;
background: white;
color: #333;
cursor: pointer;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
button.active {
background: #333;
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}