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 r3f

Browse Source
This commit is contained in:
divyap 2026-04-12 12:25:58 +05:30
parent 167296da2e
commit b5e07716cc
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Week-3/Task-2/r3f/src/App.css
View File

@ -4,6 +4,7 @@
position: relative; position: relative;
background-color: white; background-color: white;
overflow: hidden; overflow: hidden;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
} }
#controls { #controls {
@ -12,27 +13,36 @@
left: 20px; left: 20px;
z-index: 10; z-index: 10;
display: flex; display: flex;
gap: 10px; 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 { button {
padding: 8px 16px; padding: 10px 18px;
border: none;
border-radius: 8px;
background: white;
color: #333;
cursor: pointer; cursor: pointer;
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
font-weight: 500; font-weight: 500;
transition: all 0.2s; 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 { button:hover {
background: #e0e0e0; transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
button.active { button.active {
background: #333; background: #333;
color: white; color: white;
border-color: #333; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} }
.canvas-wrapper { .canvas-wrapper {

1
Week-3/Task-2/r3f/src/App.jsx
View File

@ -7,6 +7,7 @@ const planetUrls = {
earth: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&s', earth: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&s',
moon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROh1go667NHsMdzLyvI-0tt9Mn0eugRp0xhQ&s', moon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROh1go667NHsMdzLyvI-0tt9Mn0eugRp0xhQ&s',
sun: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg', sun: 'https://upload.wikimedia.org/wikipedia/commons/a/a4/Solarsystemscope_texture_8k_sun.jpg',
jupiter: 'https://www.shutterstock.com/image-vector/vector-texture-map-spherical-surface-260nw-2473415409.jpg',
}; };
function Planet({ variant }) { function Planet({ variant }) {