![見出し画像](https://assets.st-note.com/production/uploads/images/88659640/rectangle_large_type_2_48b486e8337b371c800ac8e958a0586b.png?width=1200)
CodeSandboxでReact Three Fiber実験その3 glTF 3Dモデル表示
■20240126追記 ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。 またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。
前回のその2のつづきです。 今回は前回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
![](https://assets.st-note.com/img/1665352735660-7a3dTVhiFS.png)
React Three Fiber Practice18 glTF Model04
React Three Fiber Practice18 glTF Model04
![](https://assets.st-note.com/img/1665352743124-6EMuxcVdSi.png)
React Three Fiber Practice19 glTF Model05
React Three Fiber Practice19 glTF Model05
![](https://assets.st-note.com/img/1665352751443-Q2VtqEkmsC.png)
React Three Fiber Practice20 glTF Model06
React Three Fiber Practice20 glTF Model06
![](https://assets.st-note.com/img/1665352773652-o1fe2Bd43a.png)
React Three Fiber Practice21 glTF Model07
React Three Fiber Practice21 glTF Model07
![](https://assets.st-note.com/img/1665352781132-v7A3mNnPzp.png)
React Three Fiber Practice22 glTF Model08
React Three Fiber Practice22 glTF Model08
![](https://assets.st-note.com/img/1665352791380-XSy9cEpIiE.png)
React Three Fiber Practice23 glTF Model09
React Three Fiber Practice23 glTF Model09
![](https://assets.st-note.com/img/1665352800446-uXSuHwWvUI.png)
React Three Fiber Practice24 glTF Model10
React Three Fiber Practice24 glTF Model10
![](https://assets.st-note.com/img/1665352881649-D6KwXQV1A9.png)
次回
この記事が気に入ったらサポートをしてみませんか?