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

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

View File

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

View File

@ -7,6 +7,7 @@ const planetUrls = {
earth: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZVsp7bSmsdGhM1GouOYgZ6l06Za__Z1ZY8A&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',
jupiter: 'https://www.shutterstock.com/image-vector/vector-texture-map-spherical-surface-260nw-2473415409.jpg',
};
function Planet({ variant }) {