Re-render function from an external signal

Questions
,
1

Hello! I struggle to update the front end when there is a new update from the backend. For exemple, when I receive a signal from "socket.on(‘cubeDestroyed’, (id *, pos) " I want that the function Chunks rerender some or all of his mesh. But I don’t understand how I can send a signal from socket.on to tell this function to rerender.

socket.on('cubeDestroyed', (id, pos) => {
  world.setVoxel(pos.x, pos.y, pos.z, 0)
})

function Chunks() {
  const onClick = useCallback((e) => {
    e.stopPropagation()
    var IntersectedCube = getCubeIntersections()
    if (IntersectedCube.x != undefined && IntersectedCube.y != undefined && IntersectedCube.z != undefined) {
      hitCube(IntersectedCube)
    }
  }, [])

  if (readyToRender) {
    data = world.generateGeometryData(nbSideCells)
    return (
      <>
        {data.map((d, i) => (
          <mesh key={i} position={d[4]} onClick={onClick}>
            <bufferGeometry attach="geometry">
              <bufferAttribute attachObject={['attributes', 'position']} args={[new Float32Array(d[0]), 3]} />
              <bufferAttribute attachObject={['attributes', 'normal']} args={[new Float32Array(d[1]), 3]} />
              <bufferAttribute attachObject={['attributes', 'uv']} args={[new Float32Array(d[2]), 2]} />
              <bufferAttribute attach="index" args={[new Uint32Array(d[3]), 1]} />
            </bufferGeometry>
          </mesh>
        ))}
      </>
    )
  } else {
    return <></>
  }
}
2

socket.on(‘cubeDestroyed’, (id, pos) => {
world.setVoxel(pos.x, pos.y, pos.z, 0)
render()
})

?

3

This sadly doesn’t seem to work, but when I connect with a new player I can see the updated geometry.

4

Putting the socket in the function and adding in it a useState change make it work. But I’m not sure it is a really good solution

function Chunks(props, status) {

  const [update, setUpdate] = useState()

  socket.on('cubeDestroyed', (id_, pos) => {

    world.setVoxel(pos.x, pos.y, pos.z, 0)

    setUpdate(!update)

  })
const onClick = useCallback((e) => {
    e.stopPropagation()
    var IntersectedCube = getCubeIntersections()
...
5

I find this way that is a little bit “cleaner” using “create” from “zustand”. But it still feels not that good to change the value of the bool like this to trigger a rendering. I don’t know either if it may cause some performance issues, so I’m still looking for a better solution if anybody has one!


// Hook used to request chunks rendering
const chunksHook = create(set => ({
  bool: false
}))

socket.on('voxelDestroyed', (id_, pos) => {

  // remove the voxel destroyed

  world.setVoxel(pos.x, pos.y, pos.z, 0)

  updatedCells = world.updateVoxelGeometry(pos.x, pos.y, pos.z)

  // request chunks rendering

  chunksHook.setState({bool: !chunksHook.getState().bool})

})

function Chunks(props, status) {

  // hook used for rendering
  chunksHook(state => state.bool)

  // code continue...
}
6

its always easier to make apps state driven, what you see on screen is a reflection of state. you need to move away from polling and other OOP practices. given that you have settled on zustand you can do this:

const useStore = create(set => {
  socket.on('cubeDestroyed', (id, pos) => {
    world.setVoxel(pos.x, pos.y, pos.z, 0)
    set({ data: world.generateGeometryData(nbSideCells) })
  })
  return { data: [] }
})

function Chunks() {
  const data = useStore(state => state.data)
  return data.map((d, i) => (
    <mesh key={i} position={d[4]} onClick={onClick}>
      <bufferGeometry>
        ..

btw, args is for constructor arguments. new THREE.Foo(1, 2, 3) equals <foo args={[1, 2, 3]} />, things like args={[new Float32Array(d[0]), 3]} will re-create the underlying object from scratch, not sure if that’s your goal.

ps, the awful arg notation is going away RFC: unified attach · Issue #1912 · pmndrs/react-three-fiber · GitHub :slight_smile:

1 Like