From 1201660c3c8f9ec4698706a49f75f894a5b76e5f Mon Sep 17 00:00:00 2001 From: divyap Date: Mon, 30 Mar 2026 23:41:56 +0530 Subject: [PATCH] feat: implement hover interaction in R3F --- Week-1/Task-3/r3f/index.html | 12 ++++++++++++ Week-1/Task-3/r3f/package.json | 20 ++++++++++++++++++++ Week-1/Task-3/r3f/src/App.jsx | 14 ++++++++++++++ Week-1/Task-3/r3f/src/Box.jsx | 32 ++++++++++++++++++++++++++++++++ Week-1/Task-3/r3f/src/main.jsx | 4 ++++ Week-1/Task-3/r3f/vite.config.js | 6 ++++++ 6 files changed, 88 insertions(+) create mode 100644 Week-1/Task-3/r3f/index.html create mode 100644 Week-1/Task-3/r3f/package.json create mode 100644 Week-1/Task-3/r3f/src/App.jsx create mode 100644 Week-1/Task-3/r3f/src/Box.jsx create mode 100644 Week-1/Task-3/r3f/src/main.jsx create mode 100644 Week-1/Task-3/r3f/vite.config.js diff --git a/Week-1/Task-3/r3f/index.html b/Week-1/Task-3/r3f/index.html new file mode 100644 index 0000000..cdb18a3 --- /dev/null +++ b/Week-1/Task-3/r3f/index.html @@ -0,0 +1,12 @@ + + + + + + Task 3 — Hover Interaction (R3F) + + +
+ + + diff --git a/Week-1/Task-3/r3f/package.json b/Week-1/Task-3/r3f/package.json new file mode 100644 index 0000000..5b76d0e --- /dev/null +++ b/Week-1/Task-3/r3f/package.json @@ -0,0 +1,20 @@ +{ + "name": "task-3-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-3/r3f/src/App.jsx b/Week-1/Task-3/r3f/src/App.jsx new file mode 100644 index 0000000..1614d24 --- /dev/null +++ b/Week-1/Task-3/r3f/src/App.jsx @@ -0,0 +1,14 @@ +import { Canvas } from '@react-three/fiber' +import Box from './Box' + +function App() { + return ( +
+ + + +
+ ) +} + +export default App diff --git a/Week-1/Task-3/r3f/src/Box.jsx b/Week-1/Task-3/r3f/src/Box.jsx new file mode 100644 index 0000000..77144d4 --- /dev/null +++ b/Week-1/Task-3/r3f/src/Box.jsx @@ -0,0 +1,32 @@ +import { useRef, useState } from 'react' +import { useFrame } from '@react-three/fiber' + +function Box() { + const meshRef = useRef() + const [hovered, setHover] = useState(false) + + useFrame(() => { + meshRef.current.rotation.x += 0.01 + meshRef.current.rotation.y += 0.01 + }) + + return ( + { + setHover(true) + document.body.style.cursor = 'pointer' + }} + onPointerOut={() => { + setHover(false) + document.body.style.cursor = 'default' + }} + scale={hovered ? 1.15 : 1} + > + + + + ) +} + +export default Box diff --git a/Week-1/Task-3/r3f/src/main.jsx b/Week-1/Task-3/r3f/src/main.jsx new file mode 100644 index 0000000..e8e6289 --- /dev/null +++ b/Week-1/Task-3/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-3/r3f/vite.config.js b/Week-1/Task-3/r3f/vite.config.js new file mode 100644 index 0000000..9ffcc67 --- /dev/null +++ b/Week-1/Task-3/r3f/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +})