如何用两个PerspectiveCameras和它们的两个对象单独进行缩放？

Question

我在窗口的左右两侧有两个对象。

当我将鼠标悬停时，我想单独缩放这些对象。

 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);
 }

如果我将鼠标悬停在左侧并尝试使用鼠标滚轮进行缩放，则工作正常。之后，当我在右侧盘旋时，我可以在右侧看到相同的缩放效果，而无需滚动鼠标。 如何解决这个问题？

Answer 1

TrachballControls获取一个可选的第二个参数，它是dom元素，它将附加鼠标事件监听器。
如果未提供此参数，则会将事件侦听器附加到文档 这意味着你的轨迹球控件都在监听文档上的事件（而不是我认为你想要的各自的容器。）
所以只需将你的场景容器div作为TrackballControlls的第二个参数发送，你应该好好去。

var leftContainer = document.getElementById('SubContainerLeft');
var rightContainer = document.getElementById('SubContainerRight');

var itsRightControls = new THREE.TrackballControls(itsRightCamera, rightContainer);
var itsLeftControls = new THREE.TrackballControls(itsLeftCamera, leftContainer);