Is this the best way to render the sprite & camera position each second?

[nazrinnoorzan]

I've a React project that receives a position, color & camera data from an API. These three data are been stored in main App.js states and I pass these states as a prop to R3F Canvas component.

So far, I can see it is working well. The sprites position keep moving, so does the camera. My concern is, is this the right way to render the sprite animations? Will Canvas keep re-render by passing the App.js states to it?

Here's my codes for App.js, ThreeCanvas.js & ThreeCamera.js (All are in separate files)

App.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>
    </>
  )
}

ThreeCamera .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
}

[drcmda]

i see no problem unless the positions are fast updates, in that case it would tank performance.

one thing that is weird is ThreeCamera. you give it the data as a prop, but useFrame executes every frame (60 frames per second). if it just gets a prop and you want to set the camera that should be a useLayoutEffect. but if you went for useFrame because these prop updates happen very fast, then that points to a real issue and optimally ThreeCamera shouldn't get that state through props but transiently inside useFrame without causing render.

[nazrinnoorzan]

The positions do fast updates though since the state data coming from a live game. So it will update like every second. Using my current approach, the sprite not been newly created every second right? It will just update its position & color, without affecting the Canvas component right?

I'm not sure what you mean on your second point though. Reason I'm setting up this ThreeCamera like this is because I want to update the camera.lookAt() based on the camera state value (coming from the props), and from my research, I don't find a way to update it directly from Canvas component. That why I make this new ThreeCamera component.

[drcmda]

the updates should not go through react then. even if you just update position and color, each update will run a react component cycle, diffing, executing all hooks, effects, memo, then sub-trees if there are. that is way too much overhead.

you find some hints here: https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls

simply fetch state from within the loop:

function YourComponent(/*no fast updating state props here*/) {
  const ref = useRef()
  useFrame(() => {
    const state = state.model.getState()
    // do stuff ...
    ref.current.position.set(state.position)
    ref.current.material.color.set(state.color)
  })
  return <mesh ref={ref} ...

[nazrinnoorzan]

Hmmm.. I get what you mean. It's just that the function to get the live data is at the main JS page and I stored it in React Hook State because I need it to render some HTML contents as well, aside from using it in ThreeJS.

What you mean by this line?
state.model.getState()

One more question, is there any difference in terms of performance between these 2 cases?

Case A : Setting the position value inside the Sprite Component Props

function ThreeCanvas({ position }) {

  return (
    <>
      <Canvas colorManagement>

        <sprite position={[position[0][0], 0, position[0][1]]}>
          <spriteMaterial  />
        </sprite>

      </Canvas>
    </>
  )
}

Case B : Setting the position value using useFrame

function ThreeSprite({ position }) {
const ref = useRef()

useFrame(() => {
    ref.current.position.set(position)
  })

  return (
    <>
        <sprite ref={ref} >
          <spriteMaterial  />
        </sprite>
    </>
  )
}