# About Orbitcontrols

**URL:** <https://discourse.threejs.org/t/about-orbitcontrols/90589>\
**Category:** Questions\
**Created:** [March 25, 2026, 6:26am UTC](https://discourse.threejs.org/t/about-orbitcontrols/90589 "2026-03-25T06:26:19Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [March 25, 2026, 7:36am UTC](https://discourse.threejs.org/t/about-orbitcontrols/90589/2 "2026-03-25T07:36:05Z")

</div>

Because you are _operating_ on the same `canvas`. And the same canvas is listened to. You need to separate what is to be moved/listened to separately, e.g. on hover.

```javascript
function TwoObj() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <>
      <OrbitControls enabled={!isHovered} makeDefault />

      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} intensity={1} />

      <mesh position={[-2.5, 0, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="red" />
      </mesh>

      <mesh
        position={[1, 0, 0]}
        onPointerOver={(e) => {
          e.stopPropagation();
          setIsHovered(true);
        }}
        onPointerOut={() => setIsHovered(false)}
      >
        <planeGeometry args={[3, 3]} />
        <meshStandardMaterial side={2}>
          <RenderTexture attach="map" frames={Infinity}>
            <color attach="background" args={["#6fff00"]} />

            <ambientLight intensity={0.5} />
            <directionalLight position={[10, 10, 5]} intensity={1.5} />

            <PerspectiveCamera makeDefault position={[0, 0, 5]} />

            <OrbitControls enabled={isHovered} makeDefault />

            <mesh>
              <torusKnotGeometry args={[1, 0.3, 100, 16]} />
              <meshStandardMaterial color="blue" />
            </mesh>
          </RenderTexture>
        </meshStandardMaterial>
      </mesh>
    </>
  );
}

```

This maybe will be helpfull as well:

> [@Sync cameras within different canvas](https://discourse.threejs.org/t/sync-cameras-within-different-canvas/56296/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 -…](https://codesandbox.io/s/view-skissor-same-camera-6otm2d?file=/src/App.js)

---

_[View the full topic](https://discourse.threejs.org/t/about-orbitcontrols/90589)._