From 9b6dc498a68397e40d85a88cf4bae514fe0d0ba6 Mon Sep 17 00:00:00 2001 From: divyap Date: Mon, 30 Mar 2026 14:21:43 +0530 Subject: [PATCH] feat: implement declarative texture mapping in R3F --- Week-1/Task-2/r3f/index.html | 12 ++++++++++ Week-1/Task-2/r3f/package.json | 21 ++++++++++++++++++ Week-1/Task-2/r3f/src/App.jsx | 17 ++++++++++++++ Week-1/Task-2/r3f/src/Box.jsx | 38 ++++++++++++++++++++++++++++++++ Week-1/Task-2/r3f/src/main.jsx | 4 ++++ Week-1/Task-2/r3f/vite.config.js | 6 +++++ 6 files changed, 98 insertions(+) create mode 100644 Week-1/Task-2/r3f/index.html create mode 100644 Week-1/Task-2/r3f/package.json create mode 100644 Week-1/Task-2/r3f/src/App.jsx create mode 100644 Week-1/Task-2/r3f/src/Box.jsx create mode 100644 Week-1/Task-2/r3f/src/main.jsx create mode 100644 Week-1/Task-2/r3f/vite.config.js diff --git a/Week-1/Task-2/r3f/index.html b/Week-1/Task-2/r3f/index.html new file mode 100644 index 0000000..517a149 --- /dev/null +++ b/Week-1/Task-2/r3f/index.html @@ -0,0 +1,12 @@ + + + + + + Task 2 — Texture Mapping (R3F) + + +
+ + + diff --git a/Week-1/Task-2/r3f/package.json b/Week-1/Task-2/r3f/package.json new file mode 100644 index 0000000..21f55bb --- /dev/null +++ b/Week-1/Task-2/r3f/package.json @@ -0,0 +1,21 @@ +{ + "name": "task-2-r3f", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "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-2/r3f/src/App.jsx b/Week-1/Task-2/r3f/src/App.jsx new file mode 100644 index 0000000..53866f7 --- /dev/null +++ b/Week-1/Task-2/r3f/src/App.jsx @@ -0,0 +1,17 @@ +import { Canvas } from '@react-three/fiber' +import Box from './Box' + +function App() { + return ( +
+ + + +
+ ) +} + +export default App \ No newline at end of file diff --git a/Week-1/Task-2/r3f/src/Box.jsx b/Week-1/Task-2/r3f/src/Box.jsx new file mode 100644 index 0000000..824e24a --- /dev/null +++ b/Week-1/Task-2/r3f/src/Box.jsx @@ -0,0 +1,38 @@ +import { useRef, useMemo } from 'react' +import { useFrame } from '@react-three/fiber' +import * as THREE from 'three' + +function Box() { + const meshRef = useRef() + + const texture = useMemo(() => { + const canvas = document.createElement('canvas') + canvas.width = 256 + canvas.height = 256 + + const ctx = canvas.getContext('2d') + + ctx.fillStyle = 'white' + ctx.fillRect(0, 0, 256, 256) + + ctx.fillStyle = 'black' + ctx.fillRect(0, 0, 128, 128) + ctx.fillRect(128, 128, 128, 128) + + return new THREE.CanvasTexture(canvas) + }, []) + + useFrame(() => { + meshRef.current.rotation.x += 0.01 + meshRef.current.rotation.y += 0.01 + }) + + return ( + + + + + ) +} + +export default Box diff --git a/Week-1/Task-2/r3f/src/main.jsx b/Week-1/Task-2/r3f/src/main.jsx new file mode 100644 index 0000000..e8e6289 --- /dev/null +++ b/Week-1/Task-2/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-2/r3f/vite.config.js b/Week-1/Task-2/r3f/vite.config.js new file mode 100644 index 0000000..9ffcc67 --- /dev/null +++ b/Week-1/Task-2/r3f/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +})