![見出し画像](https://assets.st-note.com/production/uploads/images/88659755/rectangle_large_type_2_cb661cc3832a9c0c95ea7fac04c66999.png?width=1200)
CodeSandboxでReact Three Fiber実験その4 glTF 3Dモデルアニメーション表示
■20240126追記 ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。 またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。
前回のその3のつづきです。 今回はglTFファイル形式の3Dモデルアニメーションを表示させる、CodeSandboxに投稿したコードをリストにしてみました。 3Dモデルをアニメーションさせる部分のコードはReact Three Fiberの機能を使ってというよりは、Three.jsの機能をそのまま使ってアニメーションさせているというふうになっています。 React Three Fiberの機能をメインに使用しての3Dモデルをアニメーションさせるコードは次のその5で作成しています。
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
![](https://assets.st-note.com/img/1665353221634-Qw6IZTbofA.png)
React Three Fiber Practice26 glTF Model Animation02
React Three Fiber Practice26 glTF Model Animation02
![](https://assets.st-note.com/img/1665353230589-iObdqSPtfj.png)
React Three Fiber Practice27 glTF Model Animation03
React Three Fiber Practice27 glTF Model Animation03
![](https://assets.st-note.com/img/1665353237674-I75qH0dbhW.png)
次回
この記事が気に入ったらサポートをしてみませんか?