163 |
164 |
165 |
166 |
181 |
182 | Reset Model
183 |
184 |
185 |
186 |
187 |
188 |
189 |
198 |
199 | Reset Camera
200 |
201 |
202 |
203 |
204 |
212 |
213 | Take Photo
214 |
215 |
216 |
217 |
218 |
219 |
227 |
228 | Undo (⌘Z)
229 |
230 |
231 |
232 |
233 |
241 |
242 | Redo (⌘⇧Z)
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
258 |
259 | View Mode (Space)
260 |
261 |
262 |
263 |
264 |
272 |
273 | Paint Mode (Space)
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
setBrushSize(value[0])}
288 | className="w-24"
289 | />
290 |
291 |
292 |
{brushSize}px
293 |
294 |
295 |
296 |
297 |
298 |
302 |
303 |
304 | setTempColor(color.hex)}
308 | onChangeComplete={(color) => {
309 | setSelectedColor(color.hex);
310 | }}
311 | />
312 |
313 |
314 |
315 | {Array.from({ length: 9 }).map((_, index) => (
316 |
326 | colorHistory[index + 1] &&
327 | setSelectedColor(colorHistory[index + 1])
328 | }
329 | />
330 | ))}
331 |
332 |
333 |
334 |
335 | );
336 | }
337 |
--------------------------------------------------------------------------------
/src/app/components/painting-board.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | useRef,
5 | useState,
6 | useEffect,
7 | Suspense,
8 | useImperativeHandle,
9 | forwardRef,
10 | } from "react";
11 | import { Canvas, useThree } from "@react-three/fiber";
12 | import { OrbitControls, useGLTF } from "@react-three/drei";
13 | import * as THREE from "three";
14 | import BottomBar from "./bottom-bar";
15 | export const STORAGE_KEY = "paint-canvas";
16 | export const COLOR_STORAGE_KEY = "paint-color";
17 |
18 | type GLTFResult = {
19 | scene: THREE.Group;
20 | nodes: { [key: string]: THREE.Mesh };
21 | };
22 |
23 | type CanvasRefType = {
24 | canvas: HTMLCanvasElement;
25 | ctx: CanvasRenderingContext2D;
26 | texture: THREE.CanvasTexture;
27 | };
28 |
29 | type PaintableModelProps = {
30 | url: string;
31 | selectedColor: string;
32 | brushRadius: number;
33 | isSpacePressed: boolean;
34 | canvasRef: React.RefObject
;
35 | };
36 |
37 | function PaintableModel(
38 | {
39 | url,
40 | selectedColor,
41 | brushRadius,
42 | isSpacePressed,
43 | canvasRef,
44 | }: PaintableModelProps,
45 | ref: React.ForwardedRef<{ undo: () => void; redo: () => void }>
46 | ) {
47 | const { scene } = useGLTF(url) as unknown as GLTFResult;
48 | const meshRef = useRef(null);
49 | const { camera, gl } = useThree();
50 | const [texture, setTexture] = useState(null);
51 | const painting = useRef(false);
52 | const history = useRef([]);
53 | const redoStack = useRef([]);
54 |
55 | // Add step counter refs
56 | const lastUndoTime = useRef(0);
57 | const lastRedoTime = useRef(0);
58 | const undoStepCount = useRef(1);
59 | const redoStepCount = useRef(1);
60 | const CLICK_TIMEOUT = 3000; // 3 seconds
61 |
62 | // Center the model when it's loaded
63 | useEffect(() => {
64 | if (meshRef.current) {
65 | const box = new THREE.Box3().setFromObject(meshRef.current);
66 | const center = box.getCenter(new THREE.Vector3());
67 | const size = box.getSize(new THREE.Vector3());
68 |
69 | // Center the model
70 | meshRef.current.position.x = -center.x;
71 | meshRef.current.position.y = -center.y;
72 | meshRef.current.position.z = -center.z;
73 |
74 | // Adjust camera position based on model size
75 | const maxDim = Math.max(size.x, size.y, size.z);
76 | camera.position.z = maxDim * 2;
77 | }
78 | }, [scene, camera]);
79 |
80 | useEffect(() => {
81 | const size = 1024;
82 | const canvas = document.createElement("canvas");
83 | canvas.width = canvas.height = size;
84 | const ctx = canvas.getContext("2d");
85 | if (!ctx) return;
86 |
87 | // Restore from localStorage
88 | const saved = localStorage.getItem(STORAGE_KEY);
89 | if (saved) {
90 | const img = new Image();
91 | img.onload = () => {
92 | ctx.drawImage(img, 0, 0);
93 | const canvasTexture = new THREE.CanvasTexture(canvas);
94 | setTexture(canvasTexture);
95 | canvasRef.current = { canvas, ctx, texture: canvasTexture };
96 | };
97 | img.src = saved;
98 | } else {
99 | ctx.fillStyle = "#ffffff";
100 | ctx.fillRect(0, 0, size, size);
101 | const canvasTexture = new THREE.CanvasTexture(canvas);
102 | setTexture(canvasTexture);
103 | canvasRef.current = { canvas, ctx, texture: canvasTexture };
104 | }
105 | }, []);
106 |
107 | useEffect(() => {
108 | if (texture && meshRef.current) {
109 | meshRef.current.traverse((child) => {
110 | if ((child as THREE.Mesh).isMesh) {
111 | const mesh = child as THREE.Mesh;
112 |
113 | if (mesh.geometry && !mesh.geometry.attributes.normal) {
114 | mesh.geometry.computeVertexNormals();
115 | }
116 |
117 | mesh.material = new THREE.MeshStandardMaterial({
118 | color: "white",
119 | map: texture,
120 | roughness: 0.2,
121 | metalness: 0.0,
122 | });
123 | }
124 | });
125 | }
126 | }, [texture]);
127 |
128 | const handlePointerMove = (e: THREE.Event & PointerEvent) => {
129 | if (e.buttons === 1) {
130 | paintAt(e);
131 | }
132 | };
133 |
134 | const paintAt = (event: THREE.Event & PointerEvent) => {
135 | if (
136 | !painting.current ||
137 | isSpacePressed ||
138 | !canvasRef.current ||
139 | !meshRef.current
140 | )
141 | return;
142 |
143 | const mouse = new THREE.Vector2();
144 | const raycaster = new THREE.Raycaster();
145 | const bounds = gl.domElement.getBoundingClientRect();
146 |
147 | mouse.x = ((event.clientX - bounds.left) / bounds.width) * 2 - 1;
148 | mouse.y = -((event.clientY - bounds.top) / bounds.height) * 2 + 1;
149 |
150 | raycaster.setFromCamera(mouse, camera);
151 | const intersects = raycaster.intersectObject(meshRef.current, true);
152 |
153 | if (intersects.length > 0 && intersects[0].uv) {
154 | // Save current state for undo
155 | const dataUrl = canvasRef.current.canvas.toDataURL();
156 | history.current.push(dataUrl);
157 | redoStack.current = []; // clear redo on new paint
158 |
159 | const uv = intersects[0].uv;
160 | const x = uv.x * canvasRef.current.canvas.width;
161 | const y = (1 - uv.y) * canvasRef.current.canvas.height;
162 |
163 | const uvRadius = brushRadius / canvasRef.current.canvas.width;
164 | const pixelRadius = uvRadius * canvasRef.current.canvas.width;
165 |
166 | const { ctx, texture } = canvasRef.current;
167 | ctx.fillStyle = selectedColor;
168 | ctx.beginPath();
169 | ctx.arc(x, y, pixelRadius, 0, Math.PI * 2);
170 | ctx.fill();
171 | texture.needsUpdate = true;
172 |
173 | // Save to localStorage
174 | localStorage.setItem(STORAGE_KEY, canvasRef.current.canvas.toDataURL());
175 | }
176 | };
177 |
178 | const undo = () => {
179 | if (!canvasRef.current || history.current.length === 0) return;
180 |
181 | const now = Date.now();
182 | if (now - lastUndoTime.current < CLICK_TIMEOUT) {
183 | // Increase step count if clicked within timeout
184 | undoStepCount.current += 2;
185 | } else {
186 | // Reset step count if timeout passed
187 | undoStepCount.current = 1;
188 | }
189 | lastUndoTime.current = now;
190 |
191 | // Perform multiple undos based on step count
192 | for (let i = 0; i < undoStepCount.current; i++) {
193 | if (history.current.length === 0) break;
194 | const dataUrl = history.current.pop();
195 | if (!dataUrl) break;
196 | redoStack.current.push(canvasRef.current.canvas.toDataURL());
197 | const img = new Image();
198 | img.onload = () => {
199 | const { ctx, texture } = canvasRef.current!;
200 | ctx.clearRect(0, 0, 1024, 1024);
201 | ctx.drawImage(img, 0, 0);
202 | texture.needsUpdate = true;
203 | localStorage.setItem(
204 | STORAGE_KEY,
205 | canvasRef.current!.canvas.toDataURL()
206 | );
207 | };
208 | img.src = dataUrl;
209 | }
210 | };
211 |
212 | const redo = () => {
213 | if (!canvasRef.current || redoStack.current.length === 0) return;
214 |
215 | const now = Date.now();
216 | if (now - lastRedoTime.current < CLICK_TIMEOUT) {
217 | // Increase step count if clicked within timeout
218 | redoStepCount.current += 2;
219 | } else {
220 | // Reset step count if timeout passed
221 | redoStepCount.current = 1;
222 | }
223 | lastRedoTime.current = now;
224 |
225 | // Perform multiple redos based on step count
226 | for (let i = 0; i < redoStepCount.current; i++) {
227 | if (redoStack.current.length === 0) break;
228 | const dataUrl = redoStack.current.pop();
229 | if (!dataUrl) break;
230 | history.current.push(canvasRef.current.canvas.toDataURL());
231 | const img = new Image();
232 | img.onload = () => {
233 | const { ctx, texture } = canvasRef.current!;
234 | ctx.clearRect(0, 0, 1024, 1024);
235 | ctx.drawImage(img, 0, 0);
236 | texture.needsUpdate = true;
237 | localStorage.setItem(
238 | STORAGE_KEY,
239 | canvasRef.current!.canvas.toDataURL()
240 | );
241 | };
242 | img.src = dataUrl;
243 | }
244 | };
245 |
246 | // Reset step counts after timeout
247 | useEffect(() => {
248 | const resetUndoSteps = () => {
249 | if (Date.now() - lastUndoTime.current >= CLICK_TIMEOUT) {
250 | undoStepCount.current = 1;
251 | }
252 | };
253 |
254 | const resetRedoSteps = () => {
255 | if (Date.now() - lastRedoTime.current >= CLICK_TIMEOUT) {
256 | redoStepCount.current = 1;
257 | }
258 | };
259 |
260 | const interval = setInterval(() => {
261 | resetUndoSteps();
262 | resetRedoSteps();
263 | }, 1000); // Check every second
264 |
265 | return () => clearInterval(interval);
266 | }, []);
267 |
268 | // Expose undo/redo functions to parent component
269 | useImperativeHandle(ref, () => ({
270 | undo,
271 | redo,
272 | }));
273 |
274 | return (
275 | {
278 | if (!isSpacePressed) {
279 | painting.current = true;
280 | paintAt(e as unknown as PointerEvent);
281 | }
282 | }}
283 | onPointerMove={(e) => handlePointerMove(e as unknown as PointerEvent)}
284 | onPointerUp={() => (painting.current = false)}
285 | onPointerLeave={() => (painting.current = false)}
286 | >
287 |
288 |
289 | );
290 | }
291 |
292 | // Create a forwardRef wrapper for PaintableModel
293 | const PaintableModelWithRef = forwardRef(PaintableModel);
294 |
295 | function ExportHandler({
296 | onExport,
297 | }: {
298 | onExport: (
299 | renderer: THREE.WebGLRenderer,
300 | scene: THREE.Scene,
301 | camera: THREE.Camera
302 | ) => void;
303 | }) {
304 | const { gl, scene, camera } = useThree();
305 |
306 | useEffect(() => {
307 | const handleKey = (e: KeyboardEvent) => {
308 | if ((e.metaKey || e.ctrlKey) && e.key === "s") {
309 | e.preventDefault();
310 | onExport(gl, scene, camera);
311 | }
312 | };
313 | window.addEventListener("keydown", handleKey);
314 | return () => window.removeEventListener("keydown", handleKey);
315 | }, [gl, scene, camera, onExport]);
316 |
317 | return null;
318 | }
319 |
320 | export default function PaintingBoard() {
321 | const [selectedColor, setSelectedColor] = useState("#ff0000");
322 | const [brushRadius, setBrushRadius] = useState(8);
323 | const [isSpacePressed, setIsSpacePressed] = useState(false);
324 | const [modelUrl, setModelUrl] = useState(
325 | "https://v3.fal.media/files/panda/BUZ_xt9BFOVvsX6dP3QFW_model.glb"
326 | );
327 | const modelRef = useRef<{ undo: () => void; redo: () => void }>(null);
328 | const controlsRef = useRef(null);
329 | const canvasRef = useRef(null);
330 | const fileInputRef = useRef(null);
331 | const rendererRef = useRef(null);
332 |
333 | // Add cursor style based on mode and brush size
334 | useEffect(() => {
335 | const cursorStyle = isSpacePressed
336 | ? "default"
337 | : `url("data:image/svg+xml,%3Csvg width='${brushRadius * 2}' height='${
338 | brushRadius * 2
339 | }' viewBox='0 0 ${brushRadius * 2} ${
340 | brushRadius * 2
341 | }' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='${brushRadius}' cy='${brushRadius}' r='${
342 | brushRadius - 1
343 | }' stroke='white' stroke-width='1' fill='none'/%3E%3C/svg%3E") ${brushRadius} ${brushRadius}, auto`;
344 |
345 | document.body.style.cursor = cursorStyle;
346 |
347 | return () => {
348 | document.body.style.cursor = "default";
349 | };
350 | }, [isSpacePressed, brushRadius]);
351 |
352 | const resetCamera = () => {
353 | if (controlsRef.current) {
354 | controlsRef.current.reset();
355 | }
356 | };
357 |
358 | useEffect(() => {
359 | const handleKey = (e: KeyboardEvent) => {
360 | if (!isSpacePressed) {
361 | if ((e.metaKey || e.ctrlKey) && e.key === "z") {
362 | e.preventDefault();
363 | if (e.shiftKey) {
364 | modelRef.current?.redo();
365 | } else {
366 | modelRef.current?.undo();
367 | }
368 | } else if ((e.metaKey || e.ctrlKey) && e.key === "y") {
369 | e.preventDefault();
370 | modelRef.current?.redo();
371 | }
372 | }
373 | };
374 | window.addEventListener("keydown", handleKey);
375 | return () => window.removeEventListener("keydown", handleKey);
376 | }, [isSpacePressed, modelRef]);
377 |
378 | useEffect(() => {
379 | const handleKeyDown = (e: KeyboardEvent) => {
380 | if (e.code === "Space") {
381 | e.preventDefault(); // Prevent page scroll
382 | setIsSpacePressed((prev) => !prev); // Toggle the state
383 | }
384 | };
385 | window.addEventListener("keydown", handleKeyDown);
386 | return () => {
387 | window.removeEventListener("keydown", handleKeyDown);
388 | };
389 | }, []);
390 |
391 | const handleFileImport = (event: React.ChangeEvent) => {
392 | const file = event.target.files?.[0];
393 | if (!file) return;
394 |
395 | // Reset the canvas and storage
396 | localStorage.removeItem(STORAGE_KEY);
397 | localStorage.removeItem(COLOR_STORAGE_KEY);
398 |
399 | // Create a URL for the file
400 | const fileUrl = URL.createObjectURL(file);
401 | setModelUrl(fileUrl);
402 |
403 | // Reset camera position
404 | if (controlsRef.current) {
405 | controlsRef.current.reset();
406 | }
407 | };
408 |
409 | const exportImage = (
410 | renderer: THREE.WebGLRenderer,
411 | scene: THREE.Scene,
412 | camera: THREE.Camera
413 | ) => {
414 | // Render the scene
415 | renderer.render(scene, camera);
416 |
417 | // Get the image data
418 | const imageData = renderer.domElement.toDataURL("image/png");
419 |
420 | // Create download link
421 | const link = document.createElement("a");
422 | link.href = imageData;
423 | link.download = `miniature-painting-${new Date()
424 | .toISOString()
425 | .slice(0, 19)
426 | .replace(/:/g, "-")}.png`;
427 | document.body.appendChild(link);
428 | link.click();
429 | document.body.removeChild(link);
430 | };
431 |
432 | return (
433 |
434 |
441 |
497 |
modelRef.current?.undo()}
503 | onRedo={() => modelRef.current?.redo()}
504 | isSpacePressed={isSpacePressed}
505 | setIsSpacePressed={setIsSpacePressed}
506 | onResetCamera={resetCamera}
507 | onExportImage={() => {
508 | const event = new KeyboardEvent("keydown", {
509 | key: "s",
510 | metaKey: true,
511 | });
512 | window.dispatchEvent(event);
513 | }}
514 | onImportModel={() => fileInputRef.current?.click()}
515 | />
516 |