Chapter 1

Fundamentals

Chapter 2

Core

11. React Three Fiber Hooks

Chapter 3

Master

27. 후처리(Post processing)

Chapter 4

Shaders

30. 쉐이더 소개

23:59

31. Shaping functions

Chapter 5

VFX

NEW42. GPGPU 입자 시스템 TSL & WebGPU

42:39

Chapter 6

Portfolio

43. 포트폴리오: 3D 세계

30:17

44. 포트폴리오: HTML 인터페이스

24:02

45. Portfolio: Responsive

16:07

46. 결론

설치

Final code

이 강의에서는 첫 번째 3D 애플리케이션을 시작하기 위해 필요한 모든 도구로 환경을 설정합니다. 그런 다음 첫 번째 React 프로젝트를 만들고 필요한 의존성을 설치합니다.

운영 체제는 중요하지 않습니다. 저는 Mac을 사용하고 있지만, Windows나 Linux에서도 따라할 수 있습니다.

Visual Studio Code

원하는 코드 편집기를 사용할 수 있지만, Visual Studio Code를 추천합니다. 이 편집기는 무료이면서 오픈 소스이며 많은 훌륭한 확장 기능을 제공합니다.

다운로드 링크: https://code.visualstudio.com/

Visual Studio Code를 사용하기로 했다면, 다음 확장 기능들을 추천합니다:

ESLint: JavaScript와 JSX를 위한 린팅 유틸리티입니다. 코드에서 오류와 경고를 알려줍니다.
Prettier: 코드 포매터입니다. 설정에 기반하여 코드를 저장할 때 자동으로 포맷해줍니다.
Copilot: AI 페어 프로그래머입니다. 문맥에 따라 코드를 빠르게 작성할 수 있도록 코드 라인을 제안해줍니다.

Node.js

Node.js는 Chrome의 V8 JavaScript 엔진 위에 구축된 JavaScript 런타임입니다. 브라우저 외부에서 JavaScript 코드를 실행할 수 있도록 해줍니다. 우리의 경우 프로젝트의 개발 서버를 실행하는 데 사용할 것입니다.

다운로드 링크: https://nodejs.org/en/download/

LTS 버전을 다운로드하세요. 가장 안정적인 버전입니다.

Yarn

Yarn은 JavaScript를 위한 패키지 관리자입니다. npm과 유사하지만 더 빠르고 보안성이 뛰어납니다.

여기에서 다운로드할 수 있습니다: https://classic.yarnpkg.com/en/docs/install

우리는 프로젝트에 필요한 라이브러리를 설치하기 위해 사용할 것입니다. 예를 들어 Three.js, React Three Fiber 등...

Vite

Vite는 최신 웹 프로젝트를 위한 빌드 도구입니다. 빠르고, 경량이며, 사용하기 쉽습니다.

설치가 필요하지 않습니다.

새로운 React 프로젝트를 생성하려면 터미널을 열고(Visual Studio Code에서는 Terminal > New Terminal 메뉴에서 열 수 있습니다) 다음 명령어를 실행하십시오:

yarn create vite

그런 다음 프로젝트 이름을 입력하고 enter 키를 누른 후 키보드 화살표 키를 사용하여 프레임워크로 React, 언어로 JavaScript를 선택하십시오.

Framework selection with Vite

다음과 같은 화면이 보일 것입니다:

Project successfully created

이제 Visual Studio Code에서 Open Folder를 클릭하여 방금 생성한 프로젝트 폴더를 엽니다.

터미널에서 다음 명령어를 실행하여 의존성을 설치하고 프로젝트의 개발 서버를 시작합니다:

yarn
yarn dev

터미널에서 프로젝트에 접근할 수 있는 로컬 URL을 제공할 것입니다:

Development server started

브라우저에서 열거나 Mac에서는 cmd + click, Windows/Linux에서는 ctrl + click으로 URL을 클릭하여 기본 Vite React 페이지를 확인할 수 있습니다:

Default Vite React page

이제 작동하는 React 프로젝트가 준비되었습니다. 필요한 라이브러리를 설치할 시간입니다.

React Three Fiber

프로젝트에 r3f를 추가하려면 터미널에서 다음 명령어를 실행하세요:

yarn add three @types/three @react-three/fiber

터미널에서 개발 서버가 여전히 실행 중이라면 위 명령을 실행하기 전에 Mac에서는 cmd + c, Windows/Linux에서는 ctrl + c를 눌러 멈추세요.

이 명령은 three와 react-three-fiber를 프로젝트의 종속성으로 설치합니다.

설치가 완료되면 App.css 파일을 제거하고 index.css의 내용을 다음으로 대체하세요:

#root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

이렇게 하면 canvas가 전체 화면을 차지하게 됩니다.

App.jsx의 내용을 다음으로 대체하세요:

import { Canvas } from "@react-three/fiber";

function App() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshNormalMaterial />
      </mesh>
    </Canvas>
  );
}

export default App;

Canvas 컴포넌트는 모든 r3f 애플리케이션의 루트입니다. 이는 WebGL context와 Three.js scene을 생성하는 React 컴포넌트입니다.

Canvas 컴포넌트 내부에는 mesh 컴포넌트가 있습니다. mesh는 장면에서 렌더링할 수 있는 개체로, geometry와 material로 구성됩니다.

geometry나 material이 무엇인지 이해하지 못해도 걱정하지 마세요. 다음 수업에서 다룰 예정입니다. 이 코드가 화면 중앙에 큐브를 렌더링할 것이라는 점만 알아두세요.

그런 다음, 새로운 종속성을 사용하여 개발 서버를 시작하기 위해 yarn dev를 다시 실행하세요.

화면 중앙에 사각형이 표시됩니다:

First r3f scene

그러나 3D가 아닌 2D처럼 보입니다. 이는 큐브가 camera 앞에 위치해 있기 때문입니다.

Canvas 컴포넌트에 camera prop을 추가하여 카메라를 약간 위로, 오른쪽으로 그리고 뒤로 이동할 수 있습니다:

<Canvas camera={{ position: [3, 3, 3] }}>

위치 지정이 어떻게 작동하는지는 다음 수업에서 다룰 예정입니다.

이제 큐브가 3D로 보입니다:

First r3f scene camera moved

Versions ⚠️

Three.js와 React Three Fiber는 자주 업데이트되는 라이브러리입니다. 이는 본 강좌나 다른 튜토리얼에서 본 코드가 동일한 버전을 사용하지 않으면 다르게 동작할 수 있음을 의미합니다.

이 강좌가 작성될 당시, Three.js는 WebGPU로 전환 중에 있으며, 이는 코드의 변경이나 렌더링 방식의 변화를 일으킬 수 있습니다.

이 강좌에서 제공하는 starter pack을 사용하면 저와 동일한 버전을 사용하게 되지만, 자신의 의존성 라이브러리 버전을 확인하는 방법을 아는 것이 중요합니다.

package.json 파일을 열어 dependencies와 devDependencies 객체를 찾으세요:

{
  "name": "react-three-fiber-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/drei": "^9.74.14",
    "@react-three/fiber": "^8.13.0",
    "@types/three": "^0.152.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.153.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

이 파일에서 Three.js의 버전이 ^0.153.0이고, React Three Fiber의 버전이 ^8.13.0임을 확인할 수 있습니다.

^ 기호는 semver 버전을 사용하고 있음을 뜻합니다. 이는 다음 주요 버전까지 라이브러리의 모든 업데이트를 받는다는 것을 의미합니다.

Semantic Versioning에 대해 더 알고 싶다면 다음 링크를 참고하세요: https://devhints.io/semver

ESLint

Visual Studio Code용 ESLint 확장을 설치했다면, 코드에서 몇 가지 오류를 볼 수 있습니다.

이는 Vite가 만든 기본 설정 파일에 r3f 규칙이 포함되어 있지 않기 때문입니다.

이를 수정하려면, .eslintrc.cjs 파일을 열고 extends 배열에 다음 줄을 추가하십시오:

"plugin:@react-three/recommended",

전체 파일은 다음과 같아야 합니다:

module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

이제 파일을 저장한 후, 오류가 사라져야 합니다.

코드를 린트할 수 있으려면 프로젝트의 dev dependencies에 @react-three/eslint-plugins 패키지를 설치해야 합니다:

yarn add -D @react-three/eslint-plugin

-D는 패키지를 dev dependency로 설치합니다. (최종 프로덕션 빌드에는 필요하지 않기 때문입니다)

Drei

Drei는 r3f 위에 유용한 helper와 추상화를 모아놓은 컬렉션입니다.

다음 강의에서 3D 경험을 보다 쉽고 빠르게 만들기 위해 많이 사용할 것입니다.

drei 패키지를 설치하려면 터미널에서 다음 명령어를 실행하십시오:

yarn add @react-three/drei

결론

프로젝트에 필요한 모든 종속성을 설치했으며 이제 작동하는 r3f 프로젝트가 준비되었습니다. 여기서부터 3D 경험을 만들기 시작할 것입니다.

< React Three Fiber

3D Objects >

Lesson content