About Orbitcontrols

Questions
1

I built any project with several camera.
example: main camera - canvas camera
second camera- camera inside RenderTexture

 <mesh>

      <planeGeometry  />

      <meshBasicMaterial>

        <RenderTexture attach="map">

          <Scene color={scene.color} />

          <OrbitControls/>

        </RenderTexture>

      </meshBasicMaterial>

    </mesh>

at that time, when control second camera with OrbitControls, main camera is controled.
why control? how to solve it? I want to only control second camera.

2

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.

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:

1 Like
3

Thanks for your information.

4

your way is very cool.

5

This happens because OrbitControls attaches its event listeners to the same canvas element, so both controls end up reacting to the same pointer events. Even if the cameras are different, the input source is still shared.

One common solution is to explicitly pass the camera and DOM element when creating the controls instead of relying on defaults, so each OrbitControls instance is tied to the correct camera. Another option is enabling and disabling controls based on interaction context (like hover or focus), which is similar to what was shown above.

If you’re working with multiple scenes or views in the same canvas, another approach is separating them using viewports or scissor regions so each view handles its own camera interaction. That usually keeps the controls from interfering with each other.

The main thing is making sure only one OrbitControls instance is active for the current interaction target, otherwise both will try to process the same input events.

6

Thanks for sharing.