diff --git a/Week-1/Task-4/r3f/index.html b/Week-1/Task-4/r3f/index.html
new file mode 100644
index 0000000..ded7458
--- /dev/null
+++ b/Week-1/Task-4/r3f/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Task 4 — Click To Toggle Visual State (R3F)
+
+
+
+
+
+
diff --git a/Week-1/Task-4/r3f/package.json b/Week-1/Task-4/r3f/package.json
new file mode 100644
index 0000000..b41fd41
--- /dev/null
+++ b/Week-1/Task-4/r3f/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "task-4-r3f",
+ "version": "0.0.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build"
+ },
+ "dependencies": {
+ "@react-three/fiber": "^8.16.8",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "three": "^0.163.0"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.0.0"
+ }
+}
diff --git a/Week-1/Task-4/r3f/src/App.jsx b/Week-1/Task-4/r3f/src/App.jsx
new file mode 100644
index 0000000..6b3423c
--- /dev/null
+++ b/Week-1/Task-4/r3f/src/App.jsx
@@ -0,0 +1,14 @@
+import { Canvas } from '@react-three/fiber'
+import ToggleCube from './ToggleCube'
+
+function App() {
+ return (
+
+
+
+ )
+}
+
+export default App
diff --git a/Week-1/Task-4/r3f/src/ToggleCube.jsx b/Week-1/Task-4/r3f/src/ToggleCube.jsx
new file mode 100644
index 0000000..e79210a
--- /dev/null
+++ b/Week-1/Task-4/r3f/src/ToggleCube.jsx
@@ -0,0 +1,25 @@
+import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+function ToggleCube() {
+ const meshRef = useRef()
+ const [active, setActive] = useState(false)
+
+ useFrame(() => {
+ meshRef.current.rotation.y += 0.01
+ })
+
+ return (
+ setActive(!active)}
+ onPointerOver={() => (document.body.style.cursor = 'pointer')}
+ onPointerOut={() => (document.body.style.cursor = 'default')}
+ >
+
+
+
+ )
+}
+
+export default ToggleCube
diff --git a/Week-1/Task-4/r3f/src/main.jsx b/Week-1/Task-4/r3f/src/main.jsx
new file mode 100644
index 0000000..e8e6289
--- /dev/null
+++ b/Week-1/Task-4/r3f/src/main.jsx
@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render()
diff --git a/Week-1/Task-4/r3f/vite.config.js b/Week-1/Task-4/r3f/vite.config.js
new file mode 100644
index 0000000..9ffcc67
--- /dev/null
+++ b/Week-1/Task-4/r3f/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+ plugins: [react()],
+})