밝을희 클태

Blender로 만든 3D 모델을 GLB 파일로 export하여 프로젝트의 메인 페이지에 넣으려고 했다. 그러나 GLB 파일의 크기가 큰 편이라, 네트워크가 조금이라도 느린 상황에서는 빈 화면이 오래 노출될 수 있었다. 이를 방지하기 위해, GLB 파일 다운로드 상태를 실시간으로 표시하는 기능을 구현했다. 진행 상황을 1%부터 100%까지 표현하려고 했다.전체 코드'use client';import React, { useState, useEffect } from 'react';import { Canvas } from '@react-three/fiber';import { Environment, OrbitControls, useGLTF } from '@react-three/drei';function Mode..

미니맵에 도라에몽의 위치를 표시할 때 PNG를 사용해 scale을 줄이니 너무 작아져 화질이 깨지는 문제가 생겨서 직접 그리기로 했다.힘들다..useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); img.current.src = "/smallDo.png"; img.current.onload = () => { requestAnimationFrame(init); }; const drawCanvas = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); const PosX = posRef...

이전에도 requestAnimationFrame API를 사용하여 주사율을 동기화한 적이 있지만, 그 당시에는 시간을 측정해 렌더링 스케줄에 이벤트를 등록하지 않는 방식으로 진행했다. 이번에는 이전의 방식과 달리, 모든 이벤트를 렌더링 스케줄에 등록하되, 모든 주사율에서 속도를 일정하게 유지하고 싶었다. 이전 방식에서는 렌더링 스케줄에 이벤트를 등록하지 않다 보니, 높은 주사율을 가진 모니터에서도 60 FPS 애니메이션을 보게 되는 한계가 있었다. 이러한 문제를 해결하기 위해, 이번 구현에서는 각 프레임에서 걸린 시간을 기반으로 속도를 조정함으로써 다양한 주사율에서도 일관된 애니메이션 속도를 제공할 수 있도록 하였다.주사율 동기화 구현drawCanvas 함수 내에서 timestamp를 받아와 각 프레임 ..

총 게임을 하다 보면 벽에 총알 자국이 생겼다가 시간이 지남에 따라 옅어지면서 사라지는 효과를 구현하고 싶었다.먼저 총알 자국 PNG 이미지를 준비한다. 이 이미지는 나중에 게임에서 총알 자국을 그릴 때 사용된다.이전의 총알 자국들을 기억하기 위해 bulletMarks라는 배열을 만들고, 배열 안에 총알 객체를 저장한다. 각 총알 자국 객체는 다음과 같은 속성을 가진다x, y: 총알 자국의 좌표t: 총알 자국이 생긴 시간rotate: 총알 자국을 랜덤한 각도로 회전시키기 위한 값각도는 2π 라디안(360도)으로 표현할 수 있으며, 랜덤한 각도를 만들기 위해 N (0 N N = 0.52π * 0.5 = 1π1π = 180ºN = 0.22π * 0.2 = 0.4π0.4π * 180/π = 72ºN = 0.8..

Canvas로 도라에몽을 움직이는 애니메이션을 구현하던 중, 도라에몽을 잡으면 게임이 종료되고 ‘클리어’ 표시가 나오는 기능을 추가하려고 했다. 그러나 이 과정에서 다음과 같은 문제가 발생했다문제게임 종료 조건이 충족되면 setIsSuccess(true)가 호출되어 isSuccess 상태가 true로 변경되고, Canvas를 담당하는 useEffect의 리렌더링이 발생한다.리렌더링 후 useEffect의 clean-up 함수에서 clearRect()로 Canvas를 지우도록 구현했지만, 이전 애니메이션 프레임들이 남아 있어 피격 효과와 이미지가 전부 지워지지 않아 Canvas가 멈춘 듯 보인다.원인requestAnimationFrame을 사용하여 애니메이션을 구현할 때는 브라우저 렌더링 스케줄에 따라 애..