From f3cf452caa9702609f33f3a355d40f082cc73c75 Mon Sep 17 00:00:00 2001
From: divyap <divyapahuja31@gmail.com>
Date: Sun, 5 Apr 2026 17:01:47 +0530
Subject: [PATCH] feat: added task 4 in r3f

---
 Week-2/Task-4/r3f/src/App.css | 18 +++++++------
 Week-2/Task-4/r3f/src/App.jsx | 49 ++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/Week-2/Task-4/r3f/src/App.css b/Week-2/Task-4/r3f/src/App.css
index a83e564..dc48fc7 100644
--- a/Week-2/Task-4/r3f/src/App.css
+++ b/Week-2/Task-4/r3f/src/App.css
@@ -1,10 +1,12 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+.app-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  background-color: white;
+  overflow: hidden;
 }
 
-body {
-  overflow: hidden;
-  background-color: #111;
-  font-family: sans-serif;
\ No newline at end of file
+.canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/Week-2/Task-4/r3f/src/App.jsx b/Week-2/Task-4/r3f/src/App.jsx
index 71ffef9..7e37115 100644
--- a/Week-2/Task-4/r3f/src/App.jsx
+++ b/Week-2/Task-4/r3f/src/App.jsx
@@ -1,5 +1,48 @@
+import React, { useState } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
+import './App.css';
+
+function InteractiveObject() {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <mesh
+      onClick={() => setSelected(!selected)}
+      scale={selected ? 1.2 : 1}
+      rotation={[0, 0, 0]}
+    >
+      <torusKnotGeometry args={[1, 0.4, 100, 16]} />
+      <meshStandardMaterial
+        color={selected ? "#3498db" : "#ccc"}
+        emissive={selected ? "#1e3799" : "#000"}
+        emissiveIntensity={selected ? 0.5 : 0}
+        roughness={0.5}
+      />
+    </mesh>
+  );
+}
+
 export default function App() {
-    return (
-        <></>
-    )
+  return (
+    <div className="app-container">
+      <div id="overlay">
+        <h1>Interaction Pattern — Click on the object</h1>
+      </div>
+
+      <div className="canvas-wrapper">
+        <Canvas dpr={[1, 2]}>
+          <color attach="background" args={["white"]} />
+          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
+          
+          <ambientLight intensity={0.6 * Math.PI} />
+          <pointLight position={[5, 5, 5]} intensity={1.0 * Math.PI} />
+
+          <InteractiveObject />
+
+          <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
+        </Canvas>
+      </div>
+    </div>
+  );
 }
\ No newline at end of file