Multiplayer kind synchronization of camera

[sumanthyedoti]

scenario:
The view of a 3D scene has to be synchronized across users.

What is the proper approach to achieve this?

I implemented it by trying to sync camera position

controls.current.addEventListener('change',  (e) => {
  socket.emit('move', e.target.object.position) //throttled
})

syncing the position using useSpring

const [spring, set] = useSpring(() => ({
  x: 0,
  y: 0,
  z: 400,
  config: {
    // ...
  },
}))

useEffect(() => {
  socket.on('move', (msg) => {
    set(msg)
  })
}, [])

useFrame(() => {
  controls.current.update()
  camera.position.set(spring.x.value, spring.y.value, spring.z.value)
})

/* ==OR==*/

useFrame(({ clock, camera }) => {
  controls.current.update()
  camera.updateProjectionMatrix(void (camera.position.x = spring.x.value))
  camera.updateProjectionMatrix(void (camera.position.y = spring.y.value))
  camera.updateProjectionMatrix(void (camera.position.z = spring.z.value))
})

It's worked. But not reliable.
Please suggest the correct way to do this. Thanks.

[drcmda]

const vec = new THREE.Vector3()

useEffect(() => {
  const event = socket.on('move', msg => vec.set(...msg))
  return () => socket.remove(event) // whatever the api is ...
}, [])

useFrame(state => {
  camera.position.lerp(vec, 0.1)
  camera.updateProjectionMatrix()

what i don't understand is the role that controls plays. you can't have controls and at the same time set the camera, because that is what controls does, it mutates the camera. so you have two places writing into it and that has to be unreliable. if you want to take over the camera you must disable controls, if you want controls you must disable the socket. or figure out how to set controls instead of the camera, but i dont think threejs lets you do that. last time i needed it they told me to fork controls :-/