feat: implement hover interaction in R3F

2026-03-30 23:41:56 +05:30 · 2026-03-30 23:41:56 +05:30 · 1201660c3c
commit 1201660c3c
parent 3e989a11fd
6 changed files with 88 additions and 0 deletions
--- a/Week-1/Task-3/r3f/index.html
+++ b/Week-1/Task-3/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 3 — Hover Interaction (R3F)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/Week-1/Task-3/r3f/package.json
+++ 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"
+  }
+}
--- a/Week-1/Task-3/r3f/src/App.jsx
+++ 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 (
+    <div style={{ width: '100vw', height: '100vh', background: '#111' }}>
+      <Canvas camera={{ position: [0, 0, 5], fov: 75 }}>
+        <Box />
+      </Canvas>
+    </div>
+  )
+}
+
+export default App
--- a/Week-1/Task-3/r3f/src/Box.jsx
+++ 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 (
+    <mesh
+      ref={meshRef}
+      onPointerOver={() => {
+        setHover(true)
+        document.body.style.cursor = 'pointer'
+      }}
+      onPointerOut={() => {
+        setHover(false)
+        document.body.style.cursor = 'default'
+      }}
+      scale={hovered ? 1.15 : 1}
+    >
+      <boxGeometry args={[2, 2, 2]} />
+      <meshBasicMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+export default Box
--- a/Week-1/Task-3/r3f/src/main.jsx
+++ 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(<App />)
--- a/Week-1/Task-3/r3f/vite.config.js
+++ 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()],
+})