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

feat: add emerald material for week 3 task 1 in r3f

Browse Source
This commit is contained in:
divyap 2026-04-12 12:17:26 +05:30
parent 445464bb93
commit 12c3969acd
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-1/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-1/r3f/src/App.jsx
View File

@ -7,6 +7,7 @@ const materials = {
black: { color: "black", roughness: 1, metalness: 0 }, black: { color: "black", roughness: 1, metalness: 0 },
silver: { color: "#C0C0C0", roughness: 0.3, metalness: 1 }, silver: { color: "#C0C0C0", roughness: 0.3, metalness: 1 },
gold: { color: "#FFD700", roughness: 0.4, metalness: 1 }, gold: { color: "#FFD700", roughness: 0.4, metalness: 1 },
emerald: { color: "#009B77", roughness: 0.4, metalness: 1 },
}; };
function Scene({ variant }) { function Scene({ variant }) {