🙄

【React Three Fiber】Reactで作る３D【#６useFrame animation】

2023/03/28に公開

React

Three.js

React Three Fiber

tech

【#６useFrame animation】

YouTube: https://youtu.be/F5v5vCwHw6c

https://youtu.be/F5v5vCwHw6c

今回は「useFrame」を使用して、
３Dのオブジェクトに回転するアニメーションを設定します。

まずは、コードが長くなってきたので、
Boxのオブジェクトを別のコンポーネントに移動します。

「src」フォルダに「components」フォルダを作成して、
その中に「GeoBox.tsx」ファイルを作成します。

src/components/GeoBox.tsx

import { Box } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import { useControls, folder, button } from 'leva'
import { useRef } from 'react'
import { Mesh } from 'three'

const GeoBox = () => {
  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,
        })
      }),
    }))

  const boxRef = useRef<Mesh>(null!)

  useFrame((state, delta, xrFrame) => {
    boxRef.current.rotation.x += 0.01
    boxRef.current.rotation.y += 0.01
  })

  return (
    <Box
      ref={boxRef}
      args={[2, 2, 2]}
      scale={scale}
      position={[positionX, positionY, positionZ]}
    >
      <meshStandardMaterial color={color} wireframe={wireframe} />
    </Box>
  )
}

export default GeoBox

src/App.tsx

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import GeoBox from './components/GeoBox'

function App() {
  return (
    <div className="w-full h-screen">
      <Canvas>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} />
        <GeoBox />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App

ここまでできましたら、
「@react-three/fiber」から「useFrame」をインポートして、
アニメーションの設定を実装します。

今回は使用していないのですが、
「useFrame」の第一引数の関数には
「state, delta, xrFrame」を設定することができます。

こちらはアニメーションの設定に便利なメソッド等が含まれています。

そして、アニメーションの対象となる３Dを設定するためには、

「useRef」を使用して、対象となるコンポーネントの
「ref」にプロップスとして設定します。

【#６useFrame animation】

Discussion