从另一个标签

Question

我不确定这个问题是否与我在应用程序中设置的方式，Chrome的一些配置问题，DOM，OrbitControls或Three.js的其他功能有关。

当我在Chrome中的标签中加载我的应用程序时，一切都运行良好。当我更改为Chrome中的另一个标签页，或最小化Chrome，然后返回它（我在Windows计算机上），OrbitControls行为发生变化。值得注意的是，单击鼠标左键并将鼠标移动不再像以前一样绕轨道移动，而是向上缩小，向上移动Y轴。它看起来像摄像机角度突然变宽，相机旋转中心点也会变化。

唯一明显的解决方法是在选项卡中重新加载应用程序，这有效，但随着我接近产品的alpha版本，我开始考虑用户如何不会容忍这个问题，因为我有...

以下是我认为的相关代码。

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
    }
}

情节变浓了...感谢所有人和我一起调查。