지금까지는 기본 도형(큐브, 구, 평면 등)을 사용하여 3D 장면을 생성했습니다.

하지만 3D 그래픽을 더욱 흥미롭게 만드는 요소는 Blender, Maya, Cinema 4D, Nomad Sculpt 등과 같은 3D 모델링 소프트웨어로 3D 모델을 가져오고 표시할 수 있는 능력입니다.

소개

이 과정에서는 3D 모델링을 수행하지는 않습니다. 이는 자체적으로 큰 주제이기 때문입니다. threejs와 React Three Fiber를 사용하여 3D 경험을 만드는 데 필수적인 기술은 아닙니다. 온라인에서 많은 무료 3D 모델을 찾아 프로젝트에 사용할 수 있습니다. 그러나 3D 모델링의 기본을 배우는 것은 3D 모델이 어떻게 만들어지는지를 이해하고 프로젝트에 사용하는 데 매우 도움이 될 수 있습니다.

이 길을 따라가려면 무료 오픈 소스 3D 모델링 소프트웨어인 Blender를 사용하는 것이 좋습니다. 매우 강력한 도구이며 사용법을 배우기 위한 많은 튜토리얼이 온라인에 있습니다.

시작하는 데 가장 유명한 튜토리얼은 Blender Guru의 도넛 튜토리얼입니다.

3D 모델

3D 모델은 3D 모델의 기하학적 데이터에 대한 정보를 담고 있는 파일입니다. 텍스처와 애니메이션도 포함할 수 있습니다.

3D 모델에는 다양한 파일 형식이 존재합니다. 가장 일반적인 것은 다음과 같습니다:

• .obj: 3D 모델의 기하학적 데이터만 포함하는 간단한 파일 형식.
• .fbx: 3D 모델의 기하학적 데이터, 텍스처 및 애니메이션을 포함하는 바이너리 파일 형식. Unity 및 Unreal Engine에서 사용되는 형식입니다.
• .gltf: 3D 모델의 기하학적 데이터, 텍스처 및 애니메이션을 포함하는 JSON 파일 형식. 웹을 위한 추천 형식이며 매우 압축된 형식입니다.
• .glb: .gltf 형식의 바이너리 버전. 일반적으로 .gltf 형식보다 33% 더 작은 압축 형식입니다.

이 과정에서는 .gltf와 .glb 형식을 사용할 것입니다.

Blender를 사용하여 쉽게 한 형식에서 다른 형식으로 3D 모델을 변환할 수 있습니다.

3D 모델 찾기

무료 3D 모델을 찾을 수 있는 웹사이트들은 다음과 같습니다:

• Poly Pizza: 로열티 프리 저폴리 3D 모델 컬렉션
• Pmndrs Market: 또 하나의 로열티 프리 3D 에셋 컬렉션 (React Three Fiber 제작진의 작품!)
• Sketchfab: 3D 모델을 공유하고 다운로드할 수 있는 플랫폼. 많은 무료 모델이 있습니다!
• Unity Asset Store: 원래는 Unity용이지만, 프로젝트에 사용할 수 있는 다양한 3D 모델 팩을 찾을 수 있습니다.
• Quaternius: 자신의 웹사이트에서 무료 3D 모델 팩을 공유하는 3D 아티스트.
• Kenney: 많은 고품질의 무료 3D 모델 팩을 공유하는 또 다른 멋진 창작자.

모든 경우에서, 사용하고자 하는 3D 모델의 라이센스를 반드시 확인하세요. 일부는 개인적인 용도로만 무료이고, 일부는 상업적 용도로 무료이며, 일부는 전혀 무료가 아닙니다. 또한 특정 맥락, 예를 들어 NFT에서 사용되는 것을 방지하기 위해 커스텀 라이센스를 가진 경우도 있습니다.

이제 3D 모델을 확보했으니, 이를 프로젝트에 로드하는 방법을 알아봅시다.

프로젝트 구조

public 폴더는 우리 프로젝트의 루트 폴더입니다. 이곳은 프로젝트의 모든 정적 에셋(이미지, 3D 모델, 오디오 파일 등...)을 넣는 곳입니다.

프로젝트를 잘 정리하기 위해 public 폴더 내에 models 폴더를 만들어 모든 3D 모델을 저장할 것입니다.

스타터 팩에는 이미 일부 3D 모델이 포함된 models 폴더가 있습니다. 이들은 Quaternius에서 제공된 것입니다.

useLoader

React Three Fiber에서 외부 리소스를 로드하기 위한 기본 컴포넌트는 useLoader 훅입니다. 이 훅은 첫 번째 인자로 loader를, 두 번째 인자로 url을 받습니다. 그리고 로드된 리소스를 반환합니다.

loader는 threejs의 Loader 클래스를 확장하는 클래스입니다. threejs에는 다양한 유형의 리소스를 로드하기 위한 많은 로더가 있습니다. 예를 들어, GLTFLoader는 .gltf 및 .glb 파일을 로드하는 데 사용됩니다.

첫 번째 3D 모델을 로드해봅시다:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

primitive 컴포넌트는 씬(scene) 내에서 threejs 객체를 표시하는 데 사용됩니다. 이는 표시하려는 threejs 객체를 object prop으로 받습니다.

이제 우리의 3D 모델이 씬에 로드되고 표시되었습니다. (멋지지 않나요?)

useLoader는 로드된 리소스를 캐시 처리합니다. 따라서 동일한 리소스를 여러 번 로드할 경우, 한 번만 로드됩니다.

useGLTF / useFBX

Drei 라이브러리는 3D 모델을 로드하기 위한 두 가지 훅을 제공합니다: useGLTF와 useFBX. 이들은 사용하기 쉬운 useLoader 훅의 래퍼입니다.

기존 코드를 useGLTF 훅을 사용하도록 업데이트해 봅시다: