【React Three Fiber】Reactで作る３D【#４leva useControls】

【#４leva useControls】

YouTube: https://youtu.be/ThH75iexa-E

https://youtu.be/ThH75iexa-E

今回は「leva」を使用して、GUIを実装します。

https://github.com/pmndrs/leva

まずはこちらのライブラリをインストールします。

npm i leva

  "dependencies": {
    "leva": "^0.9.34",
  },

次に「leva」から「useControls」をインポートします。
第一引数にUIのフォルダ名を設定して、
第二引数に操作したい値を設定します。

設定した値はそれぞれ、
「Mesh」「Geometory」「Material」の
プロップスに渡します。

今回の「scale」と「position」は「Box」のコンポーネントに、
「color」と「wireframe」は「Material」のコンポーネントに渡します。

ブラウザの中心が「0」のポジションになっていますので、
ポジションの値を設定する場合はデフォルトの「value」を0にして、
「min」にはマイナスの値を設定する必要があります。

src/App.tsx

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

function App() {
  const { scale, positionX, positionY, positionZ, color, wireframe } =
    useControls('Box', {
      scale: {
        value: 1,
        min: 1,
        max: 3,
        step: 0.1,
      },
      positionX: {
        value: 0,
        min: -3,
        max: 3,
        step: 0.1,
      },
      positionY: {
        value: 0,
        min: -3,
        max: 3,
        step: 0.1,
      },
      positionZ: {
        value: 0,
        min: -3,
        max: 3,
        step: 0.1,
      },
      color: '#f00',
      wireframe: false,
    })

  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]}
          scale={scale}
          position={[positionX, positionY, positionZ]}
        >
          <meshStandardMaterial color={color} wireframe={wireframe} />
        </Box>
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App