【React Three Fiber】Reactで作る３D【#３React Three Drei】

【#３React Three Drei】

YouTube: https://youtu.be/Re7KSiual7c

https://youtu.be/Re7KSiual7c

今回は３Dのオブジェクトを操作できるように実装を進めていきます。
まずは、

https://github.com/pmndrs/drei

こちらから「React Three Drei」をインストールします。

npm install @react-three/drei

  "dependencies": {
    "@react-three/drei": "^9.58.4",
  },

インストールができましたら、
「App.tsx」をVSコードで編集していきます。

今回「App.css」は使用しませんのでインポートは削除します。
そして、「@react-three/drei」から「OrbitControls」をインポートします。

「OrbitControls」は「Canvas」のコンポーネント内で使用します。

src/App.tsx

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Box } from '@react-three/drei'

function App() {
  return (
    <div className="w-full h-screen">
      <Canvas>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} />
        {/* <mesh>
          <boxGeometry args={[2, 2, 2]} />
          <meshStandardMaterial color="red" />
        </mesh> */}
        <Box args={[2, 2, 2]}>
          <meshStandardMaterial color="red" />
        </Box>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
      </Canvas>
    </div>
  )
}

export default App

「@react-three/drei」は「@react-three/fiber」を拡張する機能も有していて、
「Box」のようなジオメトリー用のコンポーネントも用意されています。