3D 오브젝트 불러오기

 

3D 오브젝트로 동물원 구성

 

 

프로젝트 준비

 

모델 다운로드 및 폴더 정리

프로젝트의 public/models 경로에 3D Object asset을 넣어줌

 

사용할 3D 오브젝트 카테고리

• animals (동물 모델)
• dinos (공룡 모델)
• map (환경 모델)

3D 오브젝트들

프로젝트 구조 정리

1. scr폴더에서 불필요한 asset폴더 삭제
2. components 폴더 생성, 환경을 담당할 Environments.jsx 파일 생성

 

Environments.jsx 초기 코드

import { OrbitControls } from "@react-three/drei";

export const Environments = () => {
  return (
    <>
      <OrbitControls />
      <mesh>
        <boxGeometry />
      </mesh>
    </>
  );
};

 

 

3D 모델 불러오기

 

Animal 컴포넌트 생성

• components 폴더에 Animal.jsx 파일을 만듦
• useGLTF를 사용, GLTF 포맷의 3D 모델을 불러옴

import { useGLTF } from "@react-three/drei";

export const Animal = ({ name, ...props }) => {
  const { scene } = useGLTF(`/models/animals/${name}.glb`);
  return <primitive {...props} object={scene}></primitive>;
};

 

조명 추가

• Environments.jsx에 조명을 추가하여 모델이 더 선명하게 보이도록 설정

<ambientLight intensity={4} />
<directionalLight intensity={4} position={[3, 3, 3]} />

Animal 컴포넌트 수정 (중복 렌더링 방지 해결)

• SkeletonUtils.clone을 활용, 동일한 모델 중복 생성 가능 - 모델의 복제본을 만들어 렌더링

import { useGLTF } from "@react-three/drei";
import { SkeletonUtils } from "three-stdlib";
import { useMemo } from "react";

export const Animal = ({ name, ...props }) => {
  const { scene } = useGLTF(`/models/animals/${name}.glb`);
  const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
  return <primitive {...props} object={clone}></primitive>;
};

 

Animal 컴포넌트 적용

• Environments.jsx에서 Animal 컴포넌트를 불러와 사용

import { Animal } from "./Animal";

export const Environments = () => {
  return (
    <>
      <ambientLight intensity={4} />
      <directionalLight intensity={4} position={[3, 3, 3]} />
      <OrbitControls />
      <Animal name={"Alpaca"} />
    </>
  );
};

 

FBX 파일 불러오기

ZooMap 컴포넌트 생성

• components 폴더에 ZooMap.jsx 파일을 만들고, useFBX를 사용하여 FBX 파일을 불러옴

import { useFBX } from "@react-three/drei";

export const ZooMap = () => {
  const fbx = useFBX(`/models/map/zoo.FBX`);
  return <primitive object={fbx}></primitive>;
};

Environments에 ZooMap 추가

import { ZooMap } from "./ZooMap";

export const Environments = () => {
  return (
    <>
      <gridHelper args={[10, 10]} />
      <ambientLight intensity={4} />
      <directionalLight intensity={4} position={[3, 3, 3]} />
      <OrbitControls />
      <ZooMap />
    </>
  );
};

 

 

공룡 모델 추가하기

Dino.jsx 컴포넌트 생성

• components 폴더에 Dino.jsx 파일을 만들고, Animal 컴포넌트를 참고하여 공룡 모델을 불러옴

import { useGLTF } from "@react-three/drei";
import { SkeletonUtils } from "three-stdlib";
import { useMemo } from "react";

export const Dino = ({ name, ...props }) => {
  const { scene } = useGLTF(`/models/dinos/${name}.glb`);
  const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
  return <primitive {...props} object={clone}></primitive>;
};

Environments에서 공룡 추가

• 기존의 ZooMap을 주석 처리하고, Dino 컴포넌트를 추가하여 공룡 배치

import { Dino } from "./Dino";

export const Environments = () => {
  return (
    <>
      <gridHelper args={[10, 10]} />
      <ambientLight intensity={4} />
      <directionalLight intensity={4} position={[3, 3, 3]} />
      <OrbitControls />
      {/* <ZooMap /> */}
      <Dino name={"TRex"} />
      <Dino name={"Triceratops"} position={[10, 0, 0]} />
    </>
  );
};

 

glb,FBX