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:
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.
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.
Great and helpful example @drcmda!
I’m giving it a try to see if I could load different object with the same camera view.
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.
@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 Thanks a lot.
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