250410_r3f

ICS MEDIAの記事『React Three Fiber入門 - ReactとThree.jsで始める3D表現』のサンプルコードです。

パッケージマネージャーはnpmを使用しています。以下のコマンドを行うことでモジュールが追加されます。

npm ci

package.jsonのscriptsのdevコマンドを実行することで開発画面が起動できます。

npm run dev

使用ライブラリ

• Three.js r186（WebGPU）
• React Three Fiber 9.8
• React 19.3
• @react-three/drei 10.7: dreiの紹介ページで使用
• @react-spring/three 10.1: ネジ巻きのアニメーション用
• react-router-dom 7.18: ページ遷移用
• Vite 8.3: 開発サーバーとビルド
• Oxlint / Oxfmt: lintとformat

R3F公式のWebGPU対応に従い、Canvasのglプロパティに非同期の初期化関数を渡し、Three.jsのWebGPURendererを使用しています。

ライセンス

作例で使用している3Dモデルは、作者の澤田が用意したものです。ご自由にお使いいただけます。

• public/gltf/neji.glb