CodeSandboxでReact Three Fiber実験その５ glTF 3Dモデルアニメーション切り替え表示
■20240126追記 ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。 またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。
前回のその4のつづきです。 今回はglTF形式のファイルに含まれる、3Dモデルの複数のアニメーションを切り替える処理を実装したコードをCodeSandboxへ投稿してみました。
また、そのとき使用したコードを流用する感じで、その4で3DモデルのアニメーションをThree.jsの機能メインで表示させていたところから、React Three Fiberの機能メインで表示させるように切り替えたコードも作成しました（使用glTFファイルは変更）。
CodeSandbox siouxcitizen account
最終的に使用したライブラリはこれまでと同じように以下の「使用環境」にあるようなものとなります。
使用環境
@emotion/react 11.10.4
@emotion/styled 11.10.4
@fontsource/roboto 4.5.8
@mui/material 5.10.7
@react-three/drei 9.32.1
@react-three/fiber 8.6.2
react 18.2.0
react-dom 18.2.0
react-scripts 5.0.1
three 0.144.0
実験したCodeSandboxのそれぞれのコードは、CodeSandbox投稿タイトルのリンク、またはそのサムネイル画像をクリックすれば開きます。
Practice28～Practice31 と Practice37がアニメーション切り替えのコードで、Practice32～Practice36 のコードがReact Three Fiber機能メインでアニメーション表示させたコードになります。
React Three Fiber Practice28 glTF Model Multiple Animations Change01
React Three Fiber Practice28 glTF Model Multiple Animations Change01
React Three Fiber Practice29 glTF Model Multiple Animations Change02
React Three Fiber Practice29 glTF Model Multiple Animations Change02
React Three Fiber Practice30 glTF Model Multiple Animations Change03
React Three Fiber Practice30 glTF Model Multiple Animations Change03
React Three Fiber Practice31 glTF Model Multiple Animations Change04
React Three Fiber Practice31 glTF Model Multiple Animations Change04
React Three Fiber Practice32 glTF Model Animation04
React Three Fiber Practice32 glTF Model Animation04
React Three Fiber Practice33 glTF Model Animation05
React Three Fiber Practice33 glTF Model Animation05
React Three Fiber Practice34 glTF Model Animation06
React Three Fiber Practice34 glTF Model Animation06
React Three Fiber Practice35 glTF Model Animation07
React Three Fiber Practice35 glTF Model Animation07
React Three Fiber Practice36 glTF Model Animation08
React Three Fiber Practice36 glTF Model Animation08
React Three Fiber Practice37 glTF Model Multiple Animations Change05
React Three Fiber Practice37 glTF Model Multiple Animations Change05
