본 글은 유튜브 GIS DEVELOPER 님의 R3F(React Three Fiber)를 이용한 3D 웹 개발 강의를 듣고 정리한 글입니다.
https://www.youtube.com/playlist?list=PLe6NQuuFBu7HUeJkowKRkLWwkdOlhwrje

📖 프로젝트 구성

📌 개발 프로그램 설치

✅ VS Code 설치

• https://code.visualstudio.com/download

✅ NodeJS 설치

• https://nodejs.org/en/download
  • 가급적 LTS(Long-Term Service) 버전을 추천 (안정적)

📌 React 프로젝트 생성

✅ Vite 설치

• 이 프로젝트에서는 CRA가 아닌, Vite를 활용한다.

npm create vite@latest .

• React / JavaScript 선택

✅ 패키지 설치 및 애플리케이션 실행

npm install

npm run dev

📌 프로젝트 코드 정리

✅ 불필요한 코드 최초 정리

• public 디렉토리 내 vite.svg 삭제

• index.html에서 <link rel="icon" type="image/svg+xml href="/vite.svg" /> 코드 라인 삭제

• src 디렉토리 내의 assets 디렉토리 삭제

• App.css 코드 모두 지우기

• App.jsx에서 다 지우고 아래 코드 복사 붙여넣기

import './App.css'

function App() {
  return (
    <>
    </>
  )
}

export default App

• index.css 파일 내용 모두 지우기

• 이 후 개발자 도구에 아무 에러가 표시되지 않고, 화면이 흰 화면으로 뜨면 성공

📌 R3F 라이브러리 설치

✅ R3F 라이브러리 설치

npm i three @types/three @react-three/fiber