CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示

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

前回のその２のつづきです。　今回は前回glTFファイル形式の3Dモデルを表示できるようになったコードを参考に、いくつかの3Dモデルを表示するテストコードを作成しCodeSandboxに投稿しました。　ただ、glTFファイルをCodeSandboxにアップロードしていると、すぐにCodeSandboxのアップロート可能なファイル容量の上限に達してしまったので、基本的にはCDNを経由した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投稿タイトルのリンク、またはそのサムネイル画像をクリックすれば開きます。

React Three Fiber Practice17 glTF Model03

React Three Fiber Practice17 glTF Model03

React Three Fiber Practice18 glTF Model04

React Three Fiber Practice18 glTF Model04

React Three Fiber Practice19 glTF Model05

React Three Fiber Practice19 glTF Model05

React Three Fiber Practice20 glTF Model06

React Three Fiber Practice20 glTF Model06

React Three Fiber Practice21 glTF Model07

React Three Fiber Practice21 glTF Model07

React Three Fiber Practice22 glTF Model08

React Three Fiber Practice22 glTF Model08

React Three Fiber Practice23 glTF Model09

React Three Fiber Practice23 glTF Model09

React Three Fiber Practice24 glTF Model10

React Three Fiber Practice24 glTF Model10

次回