feat: added task 4 in r3f

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;
+.canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}

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 (
-        <></>
-    )
+    <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>
+  );
 }