2つのPerspectiveカメラとその2つのオブジェクトを個別にズームする方法は？

Question

ウィンドウの左右に2つのオブジェクトがあります。

私がマウスを動かすと、それらのオブジェクトを個別にズームしたいと思います。

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オプションの2番目の引数は、マウスイベントリスナーをアタッチするdom要素です。
この引数を指定しないと、イベントリスナーがドキュメントに添付されます。
これは、両方のトラックボールコントロールが、ドキュメント上のイベント（自分が望むと思うそれぞれのコンテナではなく）をリッスンしていることを意味します。
シーンコンテナのdivをTrackballControllの第2引数として送信してください。行く。

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

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