【React Three Fiber】Reactで作る３D【#６useFrame animation】で演習した際の覚書き

↑の2:19あたりまでのコード

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">
      helloooooooo
      <Canvas>
        <ambientLight intensity={0.5} />
        <directionalLight color="red" position={[0, 0, 5]} />
        <GeoBox />
        <OrbitControls />
      </Canvas>
    </div>
  );
}

export default App;

GeoBox.tsx

import { Box } from "@react-three/drei"
import { useControls, folder, button } from "leva"

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,

      })
    })
  }))

  return ( 
<Box 
args={[2, 2, 2]} 
scale= {scale} 
position={[positionX, positionY, positionZ]}
>

  <meshStandardMaterial color={color} wireframe={wireframe} />
</Box>
  )
}

export default GeoBox

tatsuyashinsei

※4:48まで

GeoBox.tsx

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

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(() => {
    boxRef.current.rotation.x += 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

tatsuyashinsei

※最終

GeoBox.tsx

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

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

tatsuyashinsei

所感：
importあたりがしれっと記述されているのを見逃さなければ動作する。
この方の動画の通りに記述すれば動作する。
動画の通りに記述できない自分が悪い。
なんだかんだ3回ほど記述し直したが、これも演習の一環。

追記：
下手にThree.jsやReact Three Fiber の教材を買い込んでシコシコ学習するよりも、こちらの動画で先に学習しておけば良かった。なにしろモチベーションが上がる。
動画終盤の state, delta, xrFrame については結局分からず。
後日調べてみるか。