概要

CRA（Create React App）プロジェクトでReact Three Fiberを使うためのボイラープレートを作成しました。

環境

CRA（Create React App）
TypeScript

npmを使用して、以下のコマンドで作成しています。

.cmd

npx create-react-app . --template typescript --use-npm

インストールしているパッケージ

dependencies

devDependencies

状態管理

Canvasとdom要素間で状態を受け渡す場合、RecoilやContextを使用するとコンテキストブリッジを追加する必要があります。
valtioを使用すれば、コンテキストブリッジを追加しないで状態の受け渡しができるようになります。

デプロイ

gh-pagesを使用した、Github Pagesへのデプロイ手順です。

1）package.jsonを変更します

"homepage": "https://<your name>.github.io/<your project name>/"

2）デプロイコマンドを実行します

npm run deploy

コントローラー（Leva vs lil-gui）

このボイラープレートでは、コントローラとしてLevaではなく、lil-guiを使用します。

LevaはReactに特化したパッケージで、値の更新と同時に関連するコンポーネントを再描画します。
Three.jsでシェーダーを使う場合、コンポーネントの再描画と同時にシェーダーも再生成されるため、GPUがストールする原因になります。
そのため、フレームループ（useFrame）内で値を更新する方が都合がいい場合が多く、Levaではなくあえてlil-guiを使用しています。

しかし、lil-guiはReact用のパッケージではないので、カスタマイズして使用しています。
カスタマイズの概要については、【React Three Fiber】GPGPUを使用したParticlesの実装でまとめています。

※ GPUのストールについて
WebGPUでガチリアルタイムレンダリングの世界が見えてきた