Viewports with OrbitControls and TransformControls

[sieeeebs]

I have 4 viewports each with their own cameras.
How do you recommend I add orbitControls and transformControls to each camera?
I have to pass a domElement for both, should I overlay divs on top of the Canvas?

[sieeeebs]

Is there away to split the canvas in sections? Or have multiple canvases with the same scene?

[sieeeebs]

^yes! that's exactly what I'm looking for, if the code is available it be great to take a look

[gsimone]

pmndrs/drei#320 Look at this issue, I posted a sandbox. We'll update controls soon to be able to be passed a camera and use that instead of the main one.

[sieeeebs]

This is brilliant, thanks! I assume I lose the default raycasting? How do you recommend I handle that?

[gsimone]

I should add this to the demo too, but you can use the useCamera hook and raycast prop:

<mesh raycast={useCamera(camera)}>
   ...
</mesh>

This will use the passed camera for events

[gsimone]

This is a usage example: https://github.com/gsimone/ombra/blob/main/src/FBOGUI.tsx#L97

[sieeeebs]

https://codesandbox.io/s/r3f-multi-view-forked-rvwgu?file=/src/Panel.js

Stuck with getting transform controls mouse picking to work. Issue occurring is the mouse coordinates are not updated to each panel. The transform controls in the example above (click on an object to attach) only work for the middle panel as the raycasting is still set to the whole canvas.

Any idea on how to fix this? The only solution I can think of is to constantly update the mouse coordinates in useFrame, but this will kill performance

Seems to be an unresolved issue: https://discourse.threejs.org/t/multiple-views-raycasting-transformcontrols/10299/9

[satyajitghana]

anyone figured out a solution to this ? i have the exact same problem

[drcmda]

its trivial now with drei primitives https://github.com/pmndrs/drei#portals