Three.JS - Firefox의 스크롤 문제

Question

다른 사람이 three.js와 함께이 문제를 겪고 있는지 확실하지 않습니다. 나는 다양한 회전 속도 (화살표 키, 마우스 또는 터치 입력)로 회전 할 큐브 simple demo을 보유하고 있습니다. Chrome 브라우저에서 모든 것이 환상적으로 작동합니다. iMac에서 건너 뛰는 작업에서 텍스쳐가 연결되고 사파리에서 제 기하학에 올바르게 매핑되지 않은 것처럼 보입니다.

Mac에서 Firefox 브라우저로 이동했는데 모든 것이 작동하며 프레임 속도는 괜찮습니다. 어떤 이유로 큐브가 특정 각도로 회전 할 때 렌더러가 점프하고 화면 위가 위로 이동하고 맨 위의 제목을 볼 수 없으며 통계 위젯이 화면 하단에서 위로 이동하는 것처럼 보입니다. 또한 내 큐브의 y 위치가 동시에 점프하는 것 같습니다. 나는 일부 모바일 브라우저에서 안드로이드에서 같은 문제가있는 것 같다. 누구나 파이어 폭스 (Mac?) 또는 모바일 브라우저에서 갑자기 점프하고 화면 상 허리 등을 움직여서 비슷한 문제가 발생했는지 궁금합니다.

편집 : 문제를 파악했습니다. 나는 여전히 이상적인 해결책이 없다. 내 데모 사본을 만들고 키보드 처리 코드를 주석 처리하려고했지만 놀랍게도 그 문제는 여전히 존재했습니다. 분명히 firefox가 위아래로 창을 약간 위아래로 스크롤하고 있으며 THREEx library에 포함 된 키보드 처리기가 Firefox의 위쪽 및 아래쪽 화살표 키의 기본 동작을 비활성화하지 않습니다. 크롬에서는 내 창을 스크롤 할 여지가 없으며 단순히 렌더러를 창 크기로 만듭니다. 파이어 폭스가 왜 스크롤하는지 모르겠다.

Answer 1

문제 파이어 폭스이었다 그래서 렌더러는, 창 크기로 설정되어 있지만 파이어 폭스 (안 크롬)에서 어떤 이유로도 스크롤 할 여지가 있다고했다 화살표 키를 사용하여 스크롤. 이 문제를 해결하기 위해 화살표 키가 스크롤되지 않도록 preventDefault()를 추가하여 THREEx.KeyboardState.js의 두 함수를 편집했습니다.

여기에 필요한 편집이다 : 내 안드로이드 장치에

this._onKeyDown = function(event){ 
    event.preventDefault(); 
    self._onKeyChange(event, true); 
}; 
this._onKeyUp = function(event){ 
    event.preventDefault(); 
    self._onKeyChange(event, false); 
}; 

Answer 2

예를 들어 Mac의 Firefox에서 동일한 문제를 실험합니다.

렌더링에서의 점프는 가비지 컬렉터 때문입니다 (Firefox에서는 제대로 구현되지 않았습니다). 각 "애니메이션"기능에 메모리를 할당하고 있습니다.

회전을 위해 새 Vector3/Matrix4를 만드는 대신 전역 변수를 사용하면 이러한 개체를 한 번만 만들 수 있습니다.

게다가 KeyboardState를 사용하고 각 애니메이션 호출에서 'State'함수를 실행하는 대신 KeyboardListener를 사용해야합니다. KeyboardListener는 코드가 변경 될 때마다 실행됩니다 (모든 시간이 아닌).

이 예를 살펴해야합니다 http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html