Three.js OrbitControls, кажется, ломается после возврата на вкладку Chrome из другой вкладки - PullRequest
Новая
       11

Three.js OrbitControls, кажется, ломается после возврата на вкладку Chrome из другой вкладки

0 голосов
/ 11 июня 2018

Я не уверен, что проблема связана с тем, как я настроил вещи в своем приложении, с какой-то проблемой конфигурации с Chrome, DOM, OrbitControls или другой функцией Three.js.

Когда я загружаю свое приложение на вкладке в Chrome, все работает отлично.Когда я переключаюсь на другую вкладку в Chrome или минимизирую Chrome, а затем возвращаюсь к ней (я на Windows-машине), поведение OrbitControls меняется.Примечательно, что нажатие левой кнопки мыши и перемещение мыши больше не вращается вокруг, как раньше, а вместо этого уменьшает масштаб по оси Y.Также кажется, что угол камеры внезапно стал намного шире, а центральная точка поворота камеры изменилась.

Единственное очевидное решение - перезагрузить приложение во вкладке, что работает, но по мере полученияблизка к выпуску альфа-версии продукта. Я начинаю думать о том, как пользователи не будут мириться с этой проблемой, как у меня ...

Вот что я считаю своим соответствующим кодом. 

document.addEventListener( "DOMContentLoaded", init );

function init() {

    cameras();
    initRenderer();
    initEventListeners();
    entities();
    // Create the Stereoscopic viewing object (Not applied yet)
    var effect = new THREE.StereoEffect( renderer );

    render();         
}

function render() {

    renderer.render(scene, entities.cameras.perspCamera );

    requestAnimationFrame( render );
}

// if the device we're using has 'alpha' attribute, then it's a mixedReality-compatible mobile browser...
function setOrientationControls(e) {
    if (e.alpha) {
        initVRControls ();
    }
    else {
        initbrowserControls ();
        var camera = entities.cameras.perspCamera;
        entities.cameras.init( camera );
    }
}

function initbrowserControls() {

    // Create the Mouse-Based Controls - Hold down left mouse button and move around the window...

    var camera = entities.cameras.perspCamera;

    entities.browserControls = new THREE.OrbitControls ( camera , container );

    entities.browserControls.target.set(
        camera.position.x + 0.15,
        camera.position.y,
        camera.position.z
    );

    entities.browserControls.noPan = true;
    entities.browserControls.noZoom = true;
}

function initEventListeners() {

    // Listen for Device Orientation events.
    window.addEventListener('deviceorientation', setOrientationControls, true);

}

function initRenderer() {

    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setClearColor( 0xffffff, 1 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.setAttribute( 'id' , 'renderSpace' );
    renderer.domElement.setAttribute( 'class' , 'threeWebGLRenderer' );

    container.appendChild( renderer.domElement );

};

если предоставленного кода недостаточно для ответа на вопрос, дайте мне знать.Я могу предоставить то, что нужно.Спасибо за помощь!

ОБНОВЛЕНИЕ:

Я отредактировал свой код в соответствии с предложением @PerrinPrograms в комментариях, чтобы попытаться сбросить элементы управления, когда document.visibilityState сброшен в "visible".

Кажется, это обходной путь ... Я бы лучше нашел источник проблемы, но мысль о том, что ее следы могут дать больше освещения.

В результате получается, чтоПоведение точно такое же, с добавленным бонусом, как отмечалось в комментариях, что, когда я возвращаюсь на вкладку приложения и у меня есть точка останова консоли в setOrientationControls(e) внутри моего нового оператора if, я не могу перезапуститьдействие консоли и необходимо перезагрузить вкладку.

Вот что я сделал с моим кодом: 

function initEventListeners() {

    // Listen for Device Orientation events.
    window.addEventListener('deviceorientation', setOrientationControls, true);
    document.addEventListener('visibilitychange', onDocumentVisible, true); // ADDED LINE

}

// ADDED FUNCTION
function onDocumentVisible(e){

    if ( document.visibilityState === "visible" ){ // CONSOLE LOCKS UP IF I PLACE BREAK HERE
        setOrientationControls(e);  // HERE TOO
    }
}

Сюжет утолщается ... Спасибо всем за внимание ко мне.

...