Continuous Update of Canvas Lat/Long

[linhtv97]

Hi all,

In my project, I’m syncing the Canvas position with the map center whenever the center updates. However, with complex scenes (many objects), the updates cause the view to "jump" or behave inconsistently.

Has anyone faced this issue? Are there solutions to smooth or optimize the updates to avoid the jumping effect?

Looking forward to your suggestions!

Canvas overlay={false} latitude={viewState.latitude} longitude={viewState.longitude} shadows onCreated={({ gl }) => { gl.setClearColor(0x000000) gl.setClearAlpha(0) gl.autoClear = false gl.shadowMap.enabled = true gl.shadowMap.needsUpdate = true gl.shadowMap.type = THREE.PCFSoftShadowMap }} gl={{ alpha: false, antialias: true }} camera={{ position: [0, 500, 0], far: 5000 }} frameloop='demand' >

And I use NearCoordinates to display Object3D

Screen.Recording.2024-12-10.at.09.45.23.mov

[RodrigoHamuy]

When you say "when the center updates" you mean latitude={viewState.latitude} longitude={viewState.longitude} are changing values?
If so, this is an easy fix!
Just avoid doing that, so that the coordinates don't need to be transformed to threejs coordinates every time you move the camera.

[linhtv97]

When you say "when the center updates" you mean latitude={viewState.latitude} longitude={viewState.longitude} are changing values?

Yes,
I have to update the position of the sun every time the camera moves, so I need to update the three.js coordinates as well