# Sync cameras within different canvas

**URL:** <https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296>\
**Category:** Questions\
**Tags:** camera\
**Created:** [September 22, 2023, 12:08pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296 "2023-09-22T12:08:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aashkann](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aashkann/32/40238_2.png) [@aashkann](https://discourse.threejs.org/u/aashkann)\
**Post date:** [September 22, 2023, 12:08pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/1 "2023-09-22T12:08:46Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/4/548b14203d42bb131f9c26b64f537f5b8064f181.jpeg)

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

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 22, 2023, 10:18pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/2 "2023-09-22T22:18:25Z")

</div>

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.

> **[Multiple views with uniform controls - CodeSandbox](https://codesandbox.io/s/multiple-views-with-uniform-controls-r9w2ob)**
>
> Shows how to form self-contained components with their own state and user interaction.

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](https://codesandbox.io/s/view-skissor-same-camera-6otm2d?file=/src/App.js) you can also put the orbitcontrols into the canvas as a direct child and it would affect all views.

---

<div class="post-metadata">

**Author:** ![aashkann](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aashkann/32/40238_2.png) [@aashkann](https://discourse.threejs.org/u/aashkann)\
**Post date:** [September 24, 2023, 9:44pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/3 "2023-09-24T21:44:18Z")

</div>

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](https://github.com/specklesystems/speckle-server/tree/main/packages/viewer-sandbox) 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.

---

<div class="post-metadata">

**Author:** ![aashkann](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aashkann/32/40238_2.png) [@aashkann](https://discourse.threejs.org/u/aashkann)\
**Post date:** [October 8, 2023, 6:41pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/4 "2023-10-08T18:41:17Z")

</div>

@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:

> **[GLTFJSX 400kb drone (forked) - CodeSandbox](https://codesandbox.io/s/gltfjsx-400kb-drone-forked-8f9665?file=%2Fsrc%2FApp.js)**
>
> Shows the results of gltfjsx transform compression.

I really appreciate it 🙂 Thanks a lot.

Best,  
Ash

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 8, 2023, 6:59pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/5 "2023-10-08T18:59:24Z")

</div>

> **[GLTFJSX 400kb drone (forked) - CodeSandbox](https://codesandbox.io/s/gltfjsx-400kb-drone-forked-hpc6wn?file=%2Fsrc%2FApp.js)**
>
> Shows the results of gltfjsx transform compression.

- 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

---

<div class="post-metadata">

**Author:** ![aashkann](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aashkann/32/40238_2.png) [@aashkann](https://discourse.threejs.org/u/aashkann)\
**Post date:** [October 8, 2023, 7:21pm UTC](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/6 "2023-10-08T19:21:33Z")

</div>

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 🙂