diff --git a/Week-1/Task-4/r3f/index.html b/Week-1/Task-4/r3f/index.html
new file mode 100644
index 0000000..8b09507
--- /dev/null
+++ b/Week-1/Task-4/r3f/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+ Task 4 R3F - Vanilla Match
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week-1/Task-4/r3f/package.json b/Week-1/Task-4/r3f/package.json
index 3382f67..6525358 100644
--- a/Week-1/Task-4/r3f/package.json
+++ b/Week-1/Task-4/r3f/package.json
@@ -2,11 +2,23 @@
"name": "week-1-task-4-r3f",
"private": true,
"version": "0.0.0",
+ "type": "module",
"packageManager": "yarn@1.22.22",
"scripts": {
- "dev": "echo 'Add your React Three Fiber dev script here'",
- "build": "echo 'Add your React Three Fiber build script here'",
- "lint": "echo 'Add your lint script here'",
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "echo 'Lint not configured yet'",
+ "preview": "vite preview",
"clean": "rm -rf dist build .next"
+ },
+ "dependencies": {
+ "@react-three/fiber": "^9.5.0",
+ "react": "^19.2.4",
+ "react-dom": "^19.2.4",
+ "three": "^0.183.2"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-react": "^6.0.0",
+ "vite": "^8.0.3"
}
}
\ No newline at end of file
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..89bdc68
--- /dev/null
+++ b/Week-1/Task-4/r3f/src/App.jsx
@@ -0,0 +1,30 @@
+import { Canvas, useFrame } from '@react-three/fiber'
+import { useRef } from 'react'
+
+function RotatingCube() {
+ const cubeRef = useRef()
+
+ useFrame((state) => {
+ const seconds = state.clock.elapsedTime
+
+ if (!cubeRef.current) return
+
+ cubeRef.current.rotation.x = seconds / 2
+ cubeRef.current.rotation.y = seconds
+ })
+
+ return (
+
+
+
+
+ )
+}
+
+export default function App() {
+ return (
+
+ )
+}
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..104325b
--- /dev/null
+++ b/Week-1/Task-4/r3f/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+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..0408f13
--- /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()],
+})