title: How to do Zooming individually with two PerspectiveCameras with their two objects?
body: <p>I have two objects in right and left side of window.<a href="https://i.stack.imgur.com/CBLw6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBLw6.png" alt="enter image description here"></a></p>
  
  <p>I want to zoom those objects individually when I hover it. </p>
  
  <pre><code> var itsLeftControls, itsRightControls;
    itsRightControls = new THREE.TrackballControls(itsRightCamera);
    itsLeftControls = new THREE.TrackballControls(itsLeftCamera);
  
   document.getElementById('SubContainerLeft').onmouseover = function () {
       aMouseOverActivate(itsLeftControls);
       aMouseOverDeactivate(itsRightControls);
      };
  
    document.getElementById('SubContainerRight').onmouseover = function () {
       aMouseOverActivate(itsRightControls);
       aMouseOverDeactivate(itsLeftControls);
     };
  
    function aMouseOverActivate(theControl)
     {
       theControl.zoomSpeed = 0.8;
     }
  
    function aMouseOverDeactivate(theControl)
     {
       theControl.zoomSpeed = 0.0;
     }
  
    function animateLeft()
    {
    requestAnimationFrame(animateLeft);
    renderLeft();
    }
  
   function renderLeft() 
   {
    itsLeftControls.update(); 
    itsLeftRenderer.render(itsLeftScene, itsLeftCamera);
   }
  
  function animateRight()
    {
    requestAnimationFrame(animateRight);
    renderRight();
    }
  
   function renderRight() 
   {
    itsRightControls.update(); 
    itsRightRenderer.render(itsRightScene, itsRightCamera);
   }
  </code></pre>
  
  <p>if I hover in left side and try to zoom with mouse scrolling wheel, it is working fine. after that when I hover in right side, I can see that same zooming effect in right side also without scrolling mouse.
  How to fix this? </p>