Sync cameras within different canvas

Questions
1

Hi community,

I am new to THREEJS, and I was hoping if a kind soul could help me with this. I’ve created a React app very basic. and with help of React-THREE/fiber created these two canvases as below:

image
image1920×720 30.2 KB

What I want to do is to get camera inforamtion from the viewport on the left in real-time and change the camera orbital values on the viewport on the right and possibly more if I had more viewports.

I appreaciate any direction.

Best,
ash

2

use drei/view for this. it is generally better to use a single canvas and split it with gl-skissor which is what view does for you. it runs faster and you can share resources (textures, materials etc) but each view still is isolated.

if you want to apply camera matrices you could, for instance, use the cameras worldMatrix or quaternion and apply it to the scene.

or, just don’t define a camera in the other view and makeDefault the control in the first and that’s it View skissor, same camera - CodeSandbox you can also put the orbitcontrols into the canvas as a direct child and it would affect all views.

1 Like
3

Great and helpful example @drcmda!

I’m giving it a try to see if I could load different object with the same camera view.

Little background:

The idea is to make a scenario base viewer for project. I’ve been developing on top of Speckle’s viewer which is based on THREEJS, using Speckle server to load geometries in their viewers. However I knew there should be a quicker way to achieve split screens in THREE, and maybe extending its functionality.

Thanks again for the quick reply.

4

@drcmda Hi again,

Thanks again for opening up a huge door to opportunity for me earlier. I’m making a prototype and it seems like I’m almost there using your method(View from drei) and a lighting setup from another example. However I cannot see my canvas. I was wondering if you could take a look at my code in here:

I really appreciate it :slight_smile: Thanks a lot.

Best,
Ash

5
  • if you want dom overlays and pointer events you need a shared event source, both the overlays and the canvas have to be in the same parent, canvas needs to feed its events from there
  • you can’t have effects in views because postprocessing isn’t laid out for that. i mean you can, but everything has to be manual, you can’t use the effectcomposer.
  • if you want orbitcontrols in each view you need to have a default camera in each view, otherwise it will fall back to the system default, so each orbit control will move all views
1 Like
6

Briliant! Thanks for the quick reply.

This solves my problem ptototyping what I was looking for, and I wanted to have a locked camera so all is good :slight_smile: