はじめに
これはメモである。
概要
three.jsのReact用ライブラリである「react-three-fiber」を使って
Reactで3Dオブジェクトを表示する。
とりあえずそのために調査をしたこと、キーワードを忘れないように並べておく
※細かい編集はあとでやる。
環境
- codesandboxで作ったReact/TypeScript環境
現在までに登場しているライブラリ
- three
- react-three-fiber
- react-three-drei
※ここからは、別で調べて使おうとしているライブラリ
- react-progressbar-semicircle（円形ゲージ）
- recharts （グラフ）
- leader-line-new, react-leader-line（要素同士を線でつないでアニメーション付ける）
検証したこと
- オブジェクトを作って表示
- カメラやオブジェクトの位置や角度の変更
- 3Dモデルを自分で作る（YouTubeで説明見ながらBlenderで作成）
- 3Dモデルを読み込んで表示
- 3Dモデルの色変更、透過変更、質感変更
最後に
まだ編集中です。
完成までしばしお待ちを。
こういうのは、投稿することに意味があると思うのでとりあえず公開！