feat: implement click toggle in R3F

2026-03-30 23:44:38 +05:30 · 2026-03-30 23:44:38 +05:30 · 933a38242b
commit 933a38242b
parent 9bcd785b90
6 changed files with 81 additions and 0 deletions
--- a/Week-1/Task-4/r3f/index.html
+++ b/Week-1/Task-4/r3f/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Task 4 — Click To Toggle Visual State (R3F)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/Week-1/Task-4/r3f/package.json
+++ 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"
+  }
+}
--- a/Week-1/Task-4/r3f/src/App.jsx
+++ 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 (
+    <div style={{ width: '100vw', height: '100vh', background: '#111' }}>
+      <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
+        <ToggleCube />
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
--- a/Week-1/Task-4/r3f/src/ToggleCube.jsx
+++ 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 (
+    <mesh
+      ref={meshRef}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => (document.body.style.cursor = 'pointer')}
+      onPointerOut={() => (document.body.style.cursor = 'default')}
+    >
+      <boxGeometry args={[2, 2, 2]} />
+      <meshBasicMaterial color={active ? 'blue' : 'lime'} />
+    </mesh>
+  )
+}
+
+export default ToggleCube
--- a/Week-1/Task-4/r3f/src/main.jsx
+++ 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(<App />)
--- a/Week-1/Task-4/r3f/vite.config.js
+++ 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()],
+})