feat: implement multi-object selection behavior audit for week 3 task 4 in r3f

Week-3/Task-4/r3f/src/App.css

@@ -4,6 +4,34 @@
   position: relative;
   background-color: white;
   overflow: hidden;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+#instructions {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  max-width: 300px;
+  z-index: 100;
+}
+
+h2 {
+  margin: 0 0 12px 0;
+  font-size: 1.25rem;
+  color: #1a1a1a;
+}
+
+p {
+  margin: 0 0 12px 0;
+  font-size: 0.95rem;
+  color: #4a4a4a;
+  line-height: 1.5;
 }
 
 .canvas-wrapper {

Week-3/Task-4/r3f/src/App.jsx

@@ -3,42 +3,65 @@ import { Canvas } from '@react-three/fiber';
 import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
 import './App.css';
 
-function InteractiveObject() {
-  const [selected, setSelected] = useState(false);
+function Selectable({ id, position, color, geometry, selectedId, onSelect }) {
+  const isSelected = selectedId === id;
 
   return (
     <mesh
-      onClick={() => setSelected(!selected)}
-      scale={selected ? 1.2 : 1}
-      rotation={[0, 0, 0]}
+      position={position}
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect(isSelected ? null : id);
+      }}
+      scale={isSelected ? 1.2 : 1}
     >
-      <torusKnotGeometry args={[1, 0.4, 100, 16]} />
-      <meshStandardMaterial
-        color={selected ? "#3498db" : "#ccc"}
-        emissive={selected ? "#1e3799" : "#000"}
-        emissiveIntensity={selected ? 0.5 : 0}
-        roughness={0.5}
+      {geometry}
+      <meshStandardMaterial 
+        color={color} 
+        emissive={isSelected ? "#444" : "black"} 
+        roughness={0.4}
+        metalness={0.1}
       />
     </mesh>
   );
 }
 
 export default function App() {
+  const [selectedId, setSelectedId] = useState(null);
+
+  const objects = [
+    { id: 'box', position: [-4, 0, 0], color: "#ff4f4f", geometry: <boxGeometry args={[2, 2, 2]} /> },
+    { id: 'sphere', position: [0, 0, 0], color: "#4f8cff", geometry: <sphereGeometry args={[1.2, 32, 32]} /> },
+    { id: 'torus', position: [4, 0, 0], color: "#4fff8c", geometry: <torusKnotGeometry args={[0.8, 0.3, 100, 16]} /> }
+  ];
+
   return (
     <div className="app-container">
-      <div id="overlay">
-        <h1>Interaction Pattern — Click on the object</h1>
+      <div id="instructions">
+        <h2>Task 4 Audit (R3F)</h2>
+        <p>Click objects to select/deselect them. State managed via React.</p>
+        <p><strong>Selected:</strong> {selectedId || 'None'}</p>
       </div>
 
       <div className="canvas-wrapper">
-        <Canvas dpr={[1, 2]}>
+        <Canvas 
+          dpr={[1, 2]} 
+          onPointerMissed={() => setSelectedId(null)}
+        >
           <color attach="background" args={["white"]} />
-          <PerspectiveCamera makeDefault position={[0, 0, 5]} />
+          <PerspectiveCamera makeDefault position={[0, 2, 8]} />
           
-          <ambientLight intensity={0.6 * Math.PI} />
-          <pointLight position={[5, 5, 5]} intensity={1.0 * Math.PI} />
+          <ambientLight intensity={0.5 * Math.PI} />
+          <directionalLight position={[5, 10, 5]} intensity={1.0 * Math.PI} />
 
-          <InteractiveObject />
+          {objects.map((obj) => (
+            <Selectable 
+              key={obj.id} 
+              {...obj} 
+              selectedId={selectedId} 
+              onSelect={setSelectedId} 
+            />
+          ))}
 
           <OrbitControls makeDefault enableDamping dampingFactor={0.05} />
         </Canvas>