How to sync the orbit control for multiple canvases simententiously? (Using React fiber & Drei)

[Anilpandiya]

0

I have 4 differet canvases with Cube geometry. I have written common scene for this and using them in diff canvas. I want to share the orbitcontrol for all simententiously. As of now orbitcontrols are working individually for each canvas.

Here is my Scene.jsx -

import React, { useEffect, useRef } from 'react';
import { useThree, useFrame, extend } from '@react-three/fiber';

// import { OrbitControls } from '@react-three/drei';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
extend({ OrbitControls });

const WoodenBox = (props) => {
  // const textureUrl = 'https://fastly.picsum.photos/id/307/5000/3333.jpg?hmac=wQFGsFoqFNhjL7Vf3y12D-qiKGUAl-BuhTbFJthHH4I';
  const imgPath = require('./resources/images/wooden_texture.jpg');

  return (
    <mesh {...props}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial map={new THREE.TextureLoader().load(imgPath)} />
    </mesh>
  );
}

export const Scene = ({ selectedCube }) => {

  const OrbitControlsWrapper = () => {
    const { camera, gl } = useThree();
    const controlsRef = useRef();

    useFrame(() => controlsRef.current.update());
    return <orbitControls ref={controlsRef} args={[camera, gl.domElement]} />;
  };

  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      {/* <axesHelper /> */}
      <WoodenBox position={selectedCube?.position} scale={selectedCube?.scale} rotation={selectedCube?.rotation} />
      {/* <OrbitControls /> */}
      <OrbitControlsWrapper />
    </>
  );
}

and in Parent component, I'm consuming like this -

<Canvas>
   <Scene selectedCube={selectedCube} />
</Canvas>

//same way 4 times
I tried this wraaper -

const OrbitControlsWrapper = () => {
    const { camera, gl } = useThree();
    const controlsRef = useRef();

    useFrame(() => controlsRef.current.update());
    return <orbitControls ref={controlsRef} args={[camera, gl.domElement]} />;
  };

but orbit controls individual canvas. I'm expecting to sync all canvas.

[vincerubinetti]

IF, by any chance, your multiple canvases are stacked on top of each other and also full screen, you can do what I did:

<>
  <Canvas>
    <SceneA />
    <OrbitControls domElement={document.body} />
  </Canvas>
  <Canvas>
    <SceneB />
    <OrbitControls domElement={document.body} />
  </Canvas>
  <Canvas>
    <SceneC/>
    <OrbitControls domElement={document.body} />
  </Canvas>
</>

This just attaches the mouse/zoom/etc listeners to a common global element. I was able to determine that I'd be able to do this by looking at the Three JS and drei OrbitControls source:

https://github.com/mrdoob/three.js/blob/7cfa3efe0a801c5b36fcc8478e1dc5f0ab0255ea/examples/jsm/controls/OrbitControls.js
https://github.com/pmndrs/drei/blob/503f4f7b9a715dfdd33b9d0a07e6f08b93894903/src/core/OrbitControls.tsx

This technically means that 3 sets of event listeners for the same thing are created, but I'm not sure there is a better way to do it. I remember clearly an issue on Three JS where the creator says there is not a way to programmatically control the orbit angle and zoom, and that a way will not be added.

[vincerubinetti]

If your canvases are not overlapped or the same size, perhaps you could use the info above to create a different solution...

I'm imagining an example where you have 4 canvases in quadrants of the screen, possibly not equally sized. Each one has a different 3d object to inspect. You want rotating one to rotate the 3 others in the same way. You could add onChange listeners to each<Canvas/> just to tell which one is currently being changed, get its raw <canvas> dom element, then set the domElement param on all your <Canvas>s to be that.

MAYBE (untested):

function App() {
  const [domElement, setDomElement] = useState(document.body);

  const onChange = useCallback((event) =>
    setDomElement(event.target.domElement)
  , []);

  return (
    <>
      <Canvas>
        <OrbitControls domElement={domElement} onChange={onChange} />
      </Canvas>
      <Canvas>
        <OrbitControls domElement={domElement} onChange={onChange} />
      </Canvas>
      <Canvas>
        <OrbitControls domElement={domElement} onChange={onChange} />
      </Canvas>
    </>
  );
}

This approach wouldn't be enough if you needed to do imperative/event based things like calling reset() all of the cameras