
# 결론

**축하합니다!** 이 강좌의 끝에 도달하셨습니다. 🎉

여러분이 **재미있게 배우고**, **많은 것을 배웠기를** 바랍니다. 가능한 초심자에게 친숙하도록 하였지만, 실제 사례를 통해 고급 개념도 보여드리고자 했습니다.

피드백이나 향후 강좌에 대한 제안 사항이 있으시면 [Discord 서버](https://lessons.wawasensei.dev/discord)에 알려주세요. 여러분의 의견을 듣게 되면 언제나 기쁩니다. 🙏

[TrustPilot](https://www.trustpilot.com/review/lessons.wawasensei.dev)에서 리뷰를 남겨 주시면 매우 감사하겠습니다. 더 많은 사람들과 만나고, 더 많은 콘텐츠를 만들고, 강의를 개선하는 데 큰 도움이 될 것입니다. 🚀

## 앞으로는 어디로 갈까요?

이제 **React Three Fiber**로 자신의 3D 웹 환경을 만들기 위한 탄탄한 기초를 갖추셨습니다. 하지만 여전히 배울 것과 발견할 것이 많이 남아 있습니다. 📚

여기 더 배우고 기술을 향상시키기 위한 추천 목록을 소개합니다:

- React Three Fiber [예제](https://docs.pmnd.rs/react-three-fiber/getting-started/examples) 및 [문서](https://docs.pmnd.rs/react-three-fiber)를 확인하세요.
- [Poimandres Discord 커뮤니티](https://discord.gg/poimandres)에 가입하세요.
- 어떤 구성 요소의 문서가 부족한가요? [Threejs 문서](https://threejs.org/docs/), [R3F Drei 소스 코드](https://github.com/pmndrs/drei) 및 [Threejs 소스 코드](https://github.com/mrdoob/three.js)를 살펴보세요.
- **프로젝트를 만들어 보세요** → 현재 기술 수준에 얽매이지 말고 목표를 설정하고, 배우면서 달성하세요. 이러한 프로젝트를 포트폴리오에 추가하세요.
- [Awwwards 웹사이트](https://www.awwwards.com/)나 좋아하는 다른 3D 웹사이트의 일부분을 다시 만들어 보세요.
- 제 [YouTube 채널](https://www.youtube.com/@WawaSensei)을 구독하고 무료 3D 웹 개발 튜토리얼을 시청하세요.
- 작업을 공유하고, 피드백을 받고, 개선하세요 ♻️

**Tech Twitter** (혹은 지금은 **X**...)는 새로운 것을 배우고 발견하기에 훌륭한 장소입니다. 팔로우하시길 추천 드리는 몇 가지 계정을 소개합니다:

- [0xca0a](https://twitter.com/0xca0a)
- [Threejs](https://twitter.com/threejs)
- [Adam](https://twitter.com/_Axiome_)
- [Bruno Simon](https://twitter.com/bruno_simon)
- [Anderson Mancini](https://twitter.com/Andersonmancini)
- [Immersive Studios](https://twitter.com/ImmersivStudios)
- [Maxime Heckel](https://twitter.com/MaximeHeckel)
- [Faraz](https://twitter.com/CantBeFaraz)
- [The Ebenezer](https://twitter.com/th_ebenezer)
- [Andrew Woan](https://twitter.com/andrewwoan)
- [Alvaro](https://twitter.com/alvarosabu)
- [Wawa Sensei](https://twitter.com/WawaSensei)

## 감사합니다 🙏


React Three Fiber: The Ultimate Guide to 3D Web Development

축하합니다. React Three Fiber의 기초를 배웠습니다. 다음은 무엇일까요?

결론

Fundamentals

Welcome to this getting started tutorial on how to use react-three-fiber to create unique 3D web experiences.

Introduction

React Three Fiber를 사용하여 독특한 3D 웹 경험을 창조하는 방법을 안내하는 시작 튜토리얼에 오신 것을 환영합니다.

소개

Learn what React Three Fiber is and why we are using it.

React Three Fiber

리액트 쓰리 파이버가 무엇인지 그리고 우리가 왜 사용하는지 알아보세요.

리액트 쓰리 파이버란?

Setup your environment with all the tools you need to start building your first 3D application.

Setup

첫 번째 3D 애플리케이션을 시작하기 위해 필요한 모든 도구로 환경을 설정하세요.

설치

Discover the basics of 3D objects: geometries, materials, and meshes.

3D Objects

3D 객체의 기초: Geometry, Material, Mesh를 탐구합니다.

Learn how to transform meshes in 3D space using the position, rotation and scale properties.

Transforms

위치, 회전 및 크기 속성을 사용하여 3D 공간에서 메쉬를 변환하는 방법을 배워봅니다.

변환

Discover the different types of cameras available in threejs and how and when to use them.

Camera

threejs에서 사용할 수 있는 다양한 종류의 카메라와 사용 방법을 알아보세요.

Debug your React Three Fiber scenes with useful helpers and Leva

Debug

유용한 헬퍼와 Leva로 React Three Fiber 장면 디버그하기

디버그

Learn how to add lights to your scene to illuminate objects.

Lights

장면에 조명을 추가하여 객체를 비추는 방법을 배워보세요.

조명

Learn how to cast and receive shadows on your 3D objects.

Shadows

3D 객체에 그림자를 그리는 방법을 배우세요.

그림자

Learn how to use React hooks with React Three Fiber.

React Hooks

React Three Fiber와 함께 React hooks를 사용하는 방법을 배우세요.

Core

Learn how to use the essential hooks provided by React Three Fiber.

React Three Fiber Hooks

React Three Fiber에서 제공하는 필수 hooks 사용법을 배웁니다.

Discover how to setup a React Three Fiber project with TypeScript for your next 3D project.

TypeScript

TypeScript를 사용하여 React Three Fiber 프로젝트를 설정하는 방법을 알아보세요.

Drei provides a set of useful controls to navigate in your scene and interact with objects.

Controls

Drei는 장면 내비게이션 및 객체와 상호작용할 수 있는 유용한 컨트롤을 제공합니다.

Learn how to handle mouse, keyboard and touch events in React Three Fiber.

Events

React Three Fiber에서 마우스, 키보드 및 터치 이벤트를 처리하는 방법을 배워보세요.

이벤트

Learn how to load and display 3D models in React Three Fiber.

3D Models

React Three Fiber에서 3D 모델을 로드하고 표시하는 방법을 배워보세요.

3D 모델

Use images and videos textures in your React Three Fiber projects

Image and video textures

React Three Fiber 프로젝트에서 이미지 및 비디오 텍스처 사용하기

이미지 및 비디오 텍스처

Combine HTML elements to your 3D experiences in your React Three Fiber projects

Html

React Three Fiber 프로젝트에서 3D 경험에 HTML 요소 결합하기

HTML

Add 2D and 3D text to your React Three Fiber experiences.

Text

React Three Fiber 경험에 2D 및 3D 텍스트 추가하기.

Add a loading screen to your React Three Fiber experiences.

Loading Screen

React Three Fiber 경험에 로딩 화면을 추가하세요.

로딩 화면

Learn how to handle page scroll on HTML and 3D elements in your React Three Fiber projects

Scroll

React Three Fiber 프로젝트에서 HTML 및 3D 요소의 페이지 스크롤 처리 방법을 배웁니다.

Discover the different ways to animate 3D elements in your React Three Fiber projects

Animations

React Three Fiber 프로젝트에서 3D 요소를 애니메이션화하는 다양한 방법을 발견하세요.

애니메이션

Master

Discover how to add physics to your 3D projects with React Three Fiber to create realistic simulations or games.

Physics

React Three Fiber를 사용하여 3D 프로젝트에 현실적인 시뮬레이션이나 게임을 만들기 위해 물리를 추가하는 방법을 알아보세요.

Discover ways to make your React Three Fiber projects more attractive.

Staging

React Three Fiber 프로젝트를 더 매력적으로 만드는 방법을 알아보세요.

Learn how to perfectly display multiple 3D views within your HTML page.

Views

여러 3D 뷰를 HTML 페이지 내에서 완벽하게 표시하는 방법을 배웁니다.

Animate your 3D scene camera with a variety of controls to create beautiful transitions.

Camera Controls

다양한 컨트롤로 3D 장면의 카메라를 애니메이트하여 아름다운 전환을 만드세요.

카메라 컨트롤

Learn how to render your 3D scene to a texture to create a variety of effects.

Render Target

3D 장면을 텍스처에 렌더링하여 다양한 효과를 만드는 방법을 배워보세요.

렌더 타겟

Post processing effects with React Three Fiber

Post Processing

React Three Fiber로 후처리 효과 적용하기

후처리(Post processing)

Learn how to create cinematic 3D transitions with React Three Fiber and Theatre.js.

Theatre.js

React Three Fiber와 Theatre.js를 사용하여 영화 같은 3D 전환을 만드는 방법을 배우세요.

Give the best experience to your users whatever their device is

Optimization

사용자의 기기 종류에 상관없이 최상의 경험을 제공하세요

최적화

Shaders

Learn about shaders and how to use them in React Three Fiber.

Introduction to Shaders

React Three Fiber에서 쉐이더를 배우고 활용하는 방법에 대해 알아봅시다.

쉐이더 소개

Control your shader's output with shaping functions.

Shaping functions

쉐이더의 출력을 shaping functions로 제어하세요.

Create a shader based responsive image slider with React Three Fiber.

Image slider

React Three Fiber를 사용하여 셰이더 기반의 반응형 이미지 슬라이더 만들기.

이미지 슬라이더

Create an advanced water shader using React Three Fiber and GLSL.

Water shader

React Three Fiber와 GLSL을 사용하여 고급 물 셰이더를 만드세요.

Water Shader

Learn how to create screen and model transitions using shaders with React Three Fiber.

Shader transitions

React Three Fiber를 사용하여 셰이더를 이용한 화면 및 모델 전환을 배우세요.

Shader 전환

Learn what VFX is and how it can be used in Three.js and React Three Fiber to add more life to your 3D scenes.

VFX Introduction

Three.js와 React Three Fiber에서 VFX가 무엇인지 배우고 3D 장면에 생동감을 불어넣는 방법을 학습합니다.

VFX 소개

Discover how to use instancing to create particles with Threejs and R3F

Particles

Threejs와 R3F를 사용하여 입자를 만드는 방법을 알아보세요

입자

Learn how to create trails with Threejs and React Three Fiber

Trails

Three.js 및 React Three Fiber로 트레일을 만드는 방법을 배워보세요.

Build a simple VFX engine using React Three Fiber to emit particles in your 3D web projects.

VFX Engine

React Three Fiber를 사용하여 3D 웹 프로젝트에서 입자를 방출하는 간단한 VFX 엔진을 빌드합니다.

VFX 엔진

Learn how to create beautiful fireworks with Three.js, React Three Fiber, and our VFX engine.

Fireworks

Three.js, React Three Fiber, VFX 엔진을 사용하여 아름다운 불꽃놀이를 만드는 방법을 배워보세요.

불꽃놀이

Create an immersive 3D wizard game with Three.js and React Three Fiber where you'll implement spell-casting mechanics, enemy AI, and dazzling magical effects using custom VFX techniques.

Wizard Game

Three.js와 React Three Fiber로 몰입형 3D 마법사 게임을 만들어보세요. 이 게임에서는 주문 시전 메커니즘, 적 AI, 맞춤형 VFX 기술을 사용한 눈부신 마법 효과를 구현합니다.

마법사 게임

Learn how to use WebGPU with Threejs and discover the new Three Shading Language (TSL) with React Three Fiber.

WebGPU / TSL

React Three Fiber로 Three.js와 함께 WebGPU를 사용하는 방법과 새로운 Three Shading Language (TSL)를 배우세요.

Leveraging TSL and WebGPU for GPGPU particle simulation

GPGPU particles with TSL & WebGPU

TSL 및 WebGPU를 활용한 GPGPU 입자 시뮬레이션

GPGPU 입자 시스템 TSL & WebGPU

Portfolio

Create a great looking portfolio with everything you've learned so far.

3D World

지금까지 배운 모든 것을 사용하여 멋진 포트폴리오를 만들어 보세요.

포트폴리오: 3D 세계

Part 2 of the portfolio project: create the HTML interface.

HTML interface

포트폴리오 프로젝트의 두 번째 부분: HTML 인터페이스 만들기.

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

Final part of the portfolio project. We will make our website responsive.

Responsive

포트폴리오 프로젝트의 마지막 부분입니다. 웹사이트를 반응형으로 만들겠습니다.

Portfolio: Responsive

Congratulations, you learnt the fundamentals of React Three Fiber. What's next?