react three fiber

1. fbx binary format 로드 기능은 제공 하지 않는다. 

 

2.fbx 로드

import {useFBX} from '@react-three/drei'

var fbxModel = useFBX('/A1_2.fbx'); // public이 루트 경로이다. 

 

 

3.여러개의 다중 모델 출력

캔버스 안에서는 <div> 등으로 묶을 수 없고, <group> 으로 묶어준다

ex) 

<Canvas>

<group>

<primitive

 object={fbxModel} position={[0, 0, 0]}

/>

</group>

</Canvas>

 

4.canvas size

<div style 로 묶어준다.

 

<div style{{width:'100vw', height:'50vh'}}>

<Canvas>

...

</Canvas>

</div>

 

5.메시 ( geometry )와 분리 된 애니메이션 로드 및 사용

var fbxRun = useFBX('/RunAni.fbx');

var aniClip = fbxRun.animations[0]; // fbx 파일 하나에 하나의 애니메이션이 있을경우 fbx.animations.length 는 1이 된다

var mixer = new THREE.AnimationMixer(fbxModel);

mixer.clipAction(aniClip).play();