CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。

前回のその３のつづきです。　今回はglTFファイル形式の3Dモデルアニメーションを表示させる、CodeSandboxに投稿したコードをリストにしてみました。　3Dモデルをアニメーションさせる部分のコードはReact Three Fiberの機能を使ってというよりは、Three.jsの機能をそのまま使ってアニメーションさせているというふうになっています。　React Three Fiberの機能をメインに使用しての3Dモデルをアニメーションさせるコードは次のその５で作成しています。

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投稿タイトルのリンク、またはそのサムネイル画像をクリックすれば開きます。

React Three Fiber Practice25 glTF Model Animation01

React Three Fiber Practice25 glTF Model Animation01

React Three Fiber Practice26 glTF Model Animation02

React Three Fiber Practice26 glTF Model Animation02

React Three Fiber Practice27 glTF Model Animation03

React Three Fiber Practice27 glTF Model Animation03

次回