reactjs - 这是使用 React-Three-Fiber 每秒渲染精灵位置的最佳方式吗？

Question

我有一个从 API 接收位置、颜色和相机数据的 React 项目。这三个数据存储在主要的 App.js 状态中，我将这些状态作为道具传递给 R3F Canvas 组件。

到目前为止，我可以看到它运行良好。精灵位置不断移动，相机也是如此。我担心的是，这是渲染精灵动画的正确方法吗？ Canvas 会通过将 App.js 状态传递给它来保持重新渲染吗？

这是我的 App.js、ThreeCanvas.js 和 ThreeCamera.js 的代码（都在单独的文件中）

应用程序.js

import ThreeCanvas from "./components/ThreeCanvas"

function App() {
  const [position, setPosition] = useState([])
  const [color, setColor] = useState([])
  const [camera, setCamera] = useState([])

  return (
    <div>
      // These p tags will keep render with the new values
      <p>Color 1: {color[0]}</p>
      <p>Color 2: {color[1]}</p>
      <p>Color 3: {color[2]}</p>
      
      // This is where ThreeCanvas component will be displayed
      <ThreeCanvas position={position} color={color} camera={camera} />
    </div>
  )
}

ThreeCanvas.js

import spriteIdleTextureImg from "../img/sprite.png"
import ThreeCamera from "./ThreeCamera"

const spriteIdleTexture = new THREE.TextureLoader().load(spriteIdleTextureImg)

function ThreeCanvas({ position, color, camera }) {

  return (
    <>
      <Canvas colorManagement>

        // The position & color value will keep changing
        <sprite position={[position[0][0], 0, position[0][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[0]} />
        </sprite>
        <sprite position={[position[1][0], 0, position[1][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[1]} />
        </sprite>
        <sprite position={[position[2][0], 0, position[2][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[2]} />
        </sprite>

        <ThreeCamera camera={camera} />
      </Canvas>
    </>
  )
}

三相机.js

function ThreeCamera ({ camera }) {

  useFrame(state => {
    
    // The camera state will keep changing based on the camera props data
    state.camera.fov = THREE.MathUtils.radToDeg(camera.fov)
    state.camera.near = camera.near
    state.camera.far = camera.far
    state.camera.aspect = camera.aspect
    state.camera.updateProjectionMatrix()
    state.camera.position.set(...camera.eye)
    state.camera.up.set(...camera.up)
    state.camera.lookAt(...camera.at)
  })

  return null
}

标签： reactjsthree.jsreact-hooksreact-three-fiber