From 933a38242bad0e668fe2d37135be96d75e6e3d4c Mon Sep 17 00:00:00 2001 From: divyap Date: Mon, 30 Mar 2026 23:44:38 +0530 Subject: [PATCH] feat: implement click toggle in R3F --- Week-1/Task-4/r3f/index.html | 12 ++++++++++++ Week-1/Task-4/r3f/package.json | 20 ++++++++++++++++++++ Week-1/Task-4/r3f/src/App.jsx | 14 ++++++++++++++ Week-1/Task-4/r3f/src/ToggleCube.jsx | 25 +++++++++++++++++++++++++ Week-1/Task-4/r3f/src/main.jsx | 4 ++++ Week-1/Task-4/r3f/vite.config.js | 6 ++++++ 6 files changed, 81 insertions(+) create mode 100644 Week-1/Task-4/r3f/index.html create mode 100644 Week-1/Task-4/r3f/package.json create mode 100644 Week-1/Task-4/r3f/src/App.jsx create mode 100644 Week-1/Task-4/r3f/src/ToggleCube.jsx create mode 100644 Week-1/Task-4/r3f/src/main.jsx create mode 100644 Week-1/Task-4/r3f/vite.config.js 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()], +})