diff --git a/Week-3/Task-3/vanilla/index.html b/Week-3/Task-3/vanilla/index.html
index e2d9ea7..316f960 100644
--- a/Week-3/Task-3/vanilla/index.html
+++ b/Week-3/Task-3/vanilla/index.html
@@ -11,6 +11,7 @@
+
diff --git a/Week-3/Task-3/vanilla/main.js b/Week-3/Task-3/vanilla/main.js
index 170bb3f..e9155b8 100644
--- a/Week-3/Task-3/vanilla/main.js
+++ b/Week-3/Task-3/vanilla/main.js
@@ -20,6 +20,7 @@ const geometries = {
black: new THREE.BoxGeometry(2, 2, 2),
silver: new THREE.SphereGeometry(1.5, 32, 32),
gold: new THREE.TorusGeometry(1.2, 0.4, 16, 100),
+ emerald: new THREE.CylinderGeometry(1.2, 0.4, 2.5, 100),
};
const materials = {
@@ -38,6 +39,11 @@ const materials = {
roughness: 0.4,
metalness: 1,
}),
+ emerald: new THREE.MeshStandardMaterial({
+ color: "#009B77",
+ roughness: 0.4,
+ metalness: 1,
+ }),
};
let currentVariant = "black";
diff --git a/Week-3/Task-3/vanilla/style.css b/Week-3/Task-3/vanilla/style.css
new file mode 100644
index 0000000..4da72f8
--- /dev/null
+++ b/Week-3/Task-3/vanilla/style.css
@@ -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);
+}