How to apply viewMatrix value directly to camera in three.js?

Questions
1

“I’m synchronizing two objects from different browsers, aiming to synchronize the ‘viewMatrix’ value for panning purposes using websocket”

base on chatGPT

camera.matrixWorldInverse.copy(viewMatrix);

“It should work, but in fact, it didn’t. Is there another way to apply the viewMatrix to the camera’s matrixWorldInverse?”

2

Any reason to not simply sync .matrix / .matrixWorld ? As long as these are synchronised, and FOV is the same, the rendered view of the cameras will then look similarly (with potential differences only caused by the browser window size.)

2 Likes
4

“Thank you for the answer. Do you mean the matrix/worldMatrix of the camera itself?”

Currently, I’m using OrbitControl for panning and have realized that the viewMatrix value needs to be synchronized.

5

If you’re using controls - you should be synchronising only camera.position and controls.target - let the controls do the rest of calculations.

2 Likes
6 
  const viewMatrixInverse = viewMatrix.clone().invert();
  const me = viewMatrixInverse.elements;
  const position = new THREE.Vector3(me[12], me[13], me[14]);
  camera.position.copy(position);

“I have tried the above code, but it still didn’t work out. Are there any other suggestions, please? Or did I do something wrong with my code?”

7

But why the matrices? Just camera.position and controls.target should be enough - you can remove viewMatrix calculations from the code entirely.

2 Likes
8

If you have orbitcontrols enabled, it will take care of reorienting the camera to look at its target… so as @mjurczyk said… you only need to synchronize controls.target and camera.position, and orbitcontrols should do the right thing.

Trying to set the matrices directly can work, but then you will need to disable orbitcontrols, since it will just overwrite whatever transformations you’re applying to the camera.
You also probably don’t want to sync viewMatrix since viewMatrix is derived from the camera.matrix, and camera.projectionMatrix combined… so you only really need to synchronize camera.matrix, if you’re going the manual route… and the renderer will take care of updating viewmatrix from your matrix + the cameras projection, during the next scene.render.

1 Like
9

Thank you all for your suggestions. Applying the target and position worked well.

1 Like
10

So, are you suggesting that if I want to use a Matrix for sync instead of the viewMatrix, I should consider using camera.matrix?

11

I’m attempting to implement the View Matrix because, in addition to browser-based synchronization, I also need to synchronize panning from a native app that does not use OrbitControls.

12

Yeah I would just synchronize .matrix … since threejs computes viewMatrix for you during render by combining camera.matrix and camera.projectionMatrix = camera.viewMatrix

1 Like
13

Thank you all so much!

1 Like