두 개의 오브젝트로 두 개의 PerspectiveCamera로 개별적으로 확대/축소하는 방법은 무엇입니까?

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 요소입니다.
이 인수를 제공하지 않으면 이벤트 리스너가 문서에 첨부됩니다.
두 트랙볼 컨트롤이 문서의 이벤트를 듣고 있음을 의미합니다.
TrackballControll의 두 번째 인수로 장면 컨테이너 div를 보내면 좋을 것입니다. 가기.

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

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