React Three Fiber + TypeScript: 3次元空間で立方体を回してみる - Qiita

React Three Fiberは、Reactのコンポーネントでthree.jsの3次元空間を組み立てて、3Dオブジェクトが操作できるライブラリです。Reactの宣言的な記述で、WebGLによる3D表現が簡単にできます。採り上げるのは、3次元空間で立方体を回してみるというつぎのような作例です。カメラはマウスでインタラクティブに操作できます。 本稿の作例 https://codesandbox.io/s/react-three-fiber-typescript-basic-example-dnzllu?file=/src/App.tsx:579-605 マウスによるカメラ操作 ドラッグ: 立方体の中心から一定の距離で旋回する。 右ボタンドラッグ: カメラの方向は保ったまま、フレーミングを水平・垂直に移動させる。 ホイール: カメラの方向に、映像を拡大・縮小させる。 ひな形プロジェクトの作成