【React Three Fiber】Reactで作る３D【#５Folder & Button】

【#５Folder & Button】

YouTube: https://youtu.be/dOicqcb2MgM

https://youtu.be/dOicqcb2MgM

今回は「leva」から「folder」と「button」をインポートして、
GUIのフォルダ分けとリセットボタンを実装します。

src/App.tsx

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

function App() {
  const [{ scale, positionX, positionY, positionZ, color, wireframe }, reset] =
    useControls('Box', () => ({
      geometry: folder({
        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,
        },
      }),
      material: folder({
        color: '#f00',
        wireframe: false,
      }),
      reset: button(() => {
        reset({
          scale: 1,
          positionX: 0,
          positionY: 0,
          positionZ: 0,
          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