728x90
반응형
- [ 언어·프레임워크/Next.js ][Next.js] 동일한 GLTF 모델을 2번 이상 렌더링하기(react-three-fiber/drei/Three.js)2023-12-28 09:45:381. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..
- [ 언어·프레임워크/React.js ][React.js] React Three Fiber(R3F) 애니메이션 재생2023-12-12 10:56:121. useEffect 훅에서 play() 메서드 작동 안 됨 3D 모델의 애니메이션을 재생하고자 하였다. 아래의 코드를 적용해 봤는데 애니메이션이 플레이되지 않았다. import React, { useState, useEffect } from "react"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; import { useLoader } from "@react-three/fiber"; const Model = ({ characterPath, scale }) => { const gltf = useLoader(GLTFLoader, characterPath); const mixer = new THREE.AnimationMixer(gltf.s..
728x90
반응형