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

まとめ