프레임에서 비 -vr 및 vr 모드 간의 카메라 회전 값 차이 조정

Question

저는 뷰어를 둘러싸고있는 다양한 소형 3D 장면 (약 8 개)이있는 Aframe의 WebVR 장면에서 작업하고 있습니다. 다른 장면을보기 위해 회전해야합니다.

장면 수가 360도를 초과 할 정도로 카메라의 현재 회전을 확인하여 콘텐츠를로드/오프로드하고 있습니다. 예를 들어, 장면 번호 7은 a 카메라의 y 값이 720과 840 사이에있을 때만 표시됩니다 (라디안으로 변환).

VR 모드가 아닌 경우 카메라의 y 값이 양방향으로 0에서 무한대로 변경되기 때문에 작동합니다.

그러나 비 vr 모드에서는 카메라 회전 방식이 다릅니다. VR 모드에서 카메라의 y 회전은 0과 180 사이 또는 0과 -180 사이입니다. IE 시계 반대 방향으로 회전하면 y 값은 180에서 -180까지 틱합니다. 그래서 현재 서브 세인이 볼 수있는 것을 만드는 나의 이전 시스템은 더 이상 작동하지 않습니다.

Vr 모드에서 카메라에서 반환 된 회전 값을 비 -vr 모드에서 작동하는 방식과 비슷한 방식으로 변환하는 방법을 찾으려합니다.

희망적으로는 의미가 있습니다. 솔직히, 그것은 머리 아마추어의 조금 ... 여기

내 코드입니다 (물론 리팩토링을 필요로하는,하지만 난 그냥 시간이되고 작동하는 데 필요) :

if (cameraRotY >= 0 && cameraRotY <= degreesToRadians(120) && !self.is('stonehenge')) { 
     removeAllStates(self); 
     document.querySelector('#SceneStonehenge').emit('show'); 
     self.addState('stonehenge'); 
    } else if (cameraRotY > degreesToRadians(120) && cameraRotY <= degreesToRadians(240) && !self.is('phoneVines')) { 
     removeAllStates(self); 
     document.querySelector('#ScenePhoneVines').emit('show'); 
     self.addState('phoneVines'); 
    } else if (cameraRotY > degreesToRadians(240) && cameraRotY <= degreesToRadians(360) && !self.is('skyFish')) { 
     removeAllStates(self); 
     document.querySelector('#SceneSkyfish').emit('show'); 
     self.addState('skyFish'); 
    } else if (cameraRotY > degreesToRadians(360) && cameraRotY <= degreesToRadians(480) && !self.is('rocksPlanets')) { 
     removeAllStates(self); 
     document.querySelector('#SceneRocksPlanets').emit('show'); 
     document.querySelector('#SceneRocksPlanetsContents').emit('show'); 
     self.addState('rocksPlanets'); 
    } else if (cameraRotY > degreesToRadians(480) && cameraRotY <= degreesToRadians(600) && !self.is('floatingIslands')) { 
     removeAllStates(self); 
     document.querySelector('#SceneFloatingIslands').emit('show'); 
     self.addState('floatingIslands'); 
    } else if (cameraRotY > degreesToRadians(600) && cameraRotY <= degreesToRadians(720) && !self.is('skywhale')) { 
     removeAllStates(self); 
     document.querySelector('#SceneSkywhale').emit('show'); 
     self.addState('skywhale'); 
    } else if (cameraRotY > degreesToRadians(720) && cameraRotY <= degreesToRadians(840) && !self.is('crack')) { 
     removeAllStates(self); 
     document.querySelector('#SceneCrack').emit('show'); 
     self.addState('crack'); 
    } else if (cameraRotY > degreesToRadians(840) && cameraRotY <= degreesToRadians(960) && !self.is('blackhole')) { 
     removeAllStates(self); 
     document.querySelector('#SceneBlackhole').emit('show'); 
     self.addState('blackhole'); 
    } 

Answer 1

룩 - 컨트롤을 조절하거나 카메라가 회전 한 각도를 별도의 변수로 추적 할 수 있습니다. 다음은 구성 요소 형식의 기본 코드입니다. 아니 테스트,하지만 기본적인 아이디어 :

document.querySelector('[camera]').getAttribute('total-rotation').degrees;