오브젝트 위치 조정 및 애니메이션 적용

 

Animal.jsx (동물 오브젝트)

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

export const Animal = ({ name, ...props }) => {
    const group = useRef();
    const { scene, animations } = useGLTF(`/models/animals/${name}.glb`);
    const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
    const { actions } = useAnimations(animations, group);

    useEffect(() => {
        console.log(actions);
        actions["Idle"].reset().play();
    }, []);

    return (
        <group ref={group}>
            <primitive {...props} object={clone}></primitive>
        </group>
    );
};

• Object 모델에 포함된 animations를 가져옴 → useAnimations 함수를 사용하여 애니메이션 적용
• primitive 태그를 group 태그로 감싸서 그룹화

 

Dino.jsx (공룡 오브젝트)

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

export const Dino = ({ name, ...props }) => {
    const group = useRef();
    const { scene, animations } = useGLTF(`/models/dinos/${name}.glb`);
    const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
    const { actions } = useAnimations(animations, group);

    useEffect(() => {
        console.log(actions);
        actions[`Armature|${name}_Idle`].reset().play();
    }, []);

    return (
        <group ref={group}>
            <primitive {...props} object={clone}></primitive>
        </group>
    );
};

• useAnimations를 사용하여 aimations와 group을 연결, 반환된 actions를 통해 특정 애니메이션 실행

 

Environments.jsx (3D 씬 컴포넌트)

import { OrbitControls } from "@react-three/drei";
import { Animal } from "./Animal";
import { ZooMap } from "./ZooMap";
import { Dino } from "./Dino";

export const Environments = () => {
    return (
        <>
            {/* <gridHelper rotation={[Math.PI / 2, 0, 0]} args={[700, 70]} />
            <gridHelper args={[700, 70]} /> */}
            <ambientLight intensity={4} />
            <directionalLight intensity={4} position={[3, 3, 3]} />
            <OrbitControls />
            <ZooMap />
            {/* <Animal name={"Alpaca"} /> */}
            <Animal name={"Deer"} position={[3, 0, 0]} />
            <Animal name={"Alpaca"} position={[-3, 0, 0]} />
            <Animal name={"Donkey"} />
            <Dino name={"TRex"} />
            <Dino name={"Triceratops"} position={[10, 0, 0]} />
        </>
    );
};

 

ZooMap.jsx (맵 오브젝트)

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

export const ZooMap = (props) => {
    const fbx = useFBX('/models/map/zoo.FBX');
    return <primitive position={[-50, -22, 0]} object={fbx}></primitive>;
};

• ZooMap의 위치를 조정하여 0,0,0 좌표에서 중앙에 오도록 함
  → Environments.jsx에서 GridHelper를 사용해 격자의 크기와 위치를 조정하며, Map을 중앙으로 이동시키기 위한 값들을 조정

 

GridHelper적용 전/후