Zenn
📑

React+TypeScript+R3Fのtutorial応用編6(FBXモデル表示)

2024/01/06に公開
React
TypeScript
Three.js
fbx
r3f
tech

Abstract

FBXモデルを表示してみた。
使ったモデルはMixiamoってサイトのモデルをありがたく使わせてもらいました。

結論

今回の成果物はココ↓
https://github.com/aaaa1597/react-r3f-advanced006

前提

手順

1.プロジェクト生成 -> VSCodeで開く

めんどいから、このスケルトンコードから始める。react-r3f-advanced003
で、下記コマンドでフォルダ名とか整備する。

フォルダリネームとか
$ D:
$ cd .\Products\React.js\            # ご自身の適当なフォルダで。
$ rd /q /s D:\Products\React.js\react-r3f-advanced003
$ git clone https://github.com/aaaa1597/react-r3f-advanced003.git
$ rd /q /s react-r3f-advanced003/.git
$ ren react-r3f-advanced003 react-r3f-advanced006
$ cd react-r3f-advanced006

準備

コマンドプロンプト
$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber
$ npm install --save @react-three/drei

準備2

  • MixamoからDLしたモデル一式をプロジェクトの"react-r3f-advanced007/public/assets"配下にコピー。

    ↓

    ↓
    そのまま、Ch09_nonPBR.fbxをプロジェクトフォルダの"react-r3f-advanced007/public/assets"配下へ。

App.tsx

まず全体。

App.tsx
-import React, { useRef, Suspense} from 'react';
+import React, { useEffect, Suspense} from 'react';
import './App.css';
-import { Canvas, useLoader, useFrame } from '@react-three/fiber'
+import { Canvas, useLoader, useThree } from '@react-three/fiber'
import * as THREE from 'three'
import { OrbitControls, Environment } from '@react-three/drei'
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

const TheModel = () => {
-  const { scene, animations } = useLoader(GLTFLoader, "/animate-bones.glb");
-  const mixer = new THREE.AnimationMixer(scene);
-  mixer.clipAction(animations[0]).play();
-  mixer.clipAction(animations[1]).play();
+ const fbx = useLoader(FBXLoader, "./assets/Ch09_nonPBR.fbx");

- useFrame((state, delta) => {
-   mixer.update(delta);
- });
+ useEffect(() => {
+   fbx.scale.multiplyScalar(0.02)
+ }, [])

  return (
-   <primitive object={scene} position={[0, 0, 0]} />
+   <primitive object={fbx} position={[1, -1, 1]} />
  )
}

const App = () => {
  return (
    <div style={{ width: "100vw", height: "75vh" }}>
      <Canvas camera={{ position: [3, 1, 3] }}>
        <ambientLight intensity={2} />
        <pointLight position={[40, 40, 40]} />
        <Suspense fallback={null}>
          <TheModel />
        </Suspense>
        <Environment preset="forest" background />
        <OrbitControls />
        <axesHelper args={[5]} />
        <gridHelper />
      </Canvas>
    </div>
  );
}

export default App;

で、実行。


出来た!!

苦労もなく、簡単だった。
同じFBXモデルでも、ドラゴンの方はテクスチャが全く解決できず。
テクスチャ周りが違うんだろうなぁ。Blender使えるようになりたい。

React+TypeScript+R3Fのtutorial応用編5(glTFで3Dアニメーション(AnimationMixer))

React+TypeScript+R3Fのtutorial応用編7(FBXモデルでアニメーション)

Discussion