Hi there, using THREE.js I tried to create a Head Up Display reticle in 3D by transferring the camera’s matrix information to an HUD object. The camera was controlled by an orbitControls class. This worked as expected EXCEPT there was desynchronization between the object motion and the camera, perhaps a frame of lag. Is there a recommended place to update this information? I tried multiple places including just before the render call but could not synchronize my object update from the camera matrix, to the rendering of scene with that camera. Thanks in advance,
OrbitControls transforms the camera but it does not recompute
Object3D.matrixWorld. Depending on what matrix is relevant to you, you have to call
camera.updateMatrixWorld() before using it for your HUD logic.
I was going to post my own problem in this reply but after thinking about what you said I figured it out. I’m drawing a line from a point in the scene to a UI element. The camera matrix needs to be updated on change. “Change” being the keyword. Add an event listener that updates the matrix and do the calculation you need in there as well. If you need the camera matrix as up to date as possible that is. For me it is updating a line so that it always points to a UI element.
Hope this helps to whoever finds this question.