Веб-страница с несколькими просмотрщиками паннеллюма падает на iPhone 6S iOS 13.3 - PullRequest
Новая
       25

Веб-страница с несколькими просмотрщиками паннеллюма падает на iPhone 6S iOS 13.3

0 голосов
/ 28 марта 2020

Я разрабатываю веб-страницу с HTML5, JS и CSS, чтобы доставить 3D 360 VR туры, сделанные с помощью камеры Richo Theta / Insta 360 One X. Чтобы добиться этого, мне нужно запустить восемь видов Pannellum. Их можно разделить на два слоя: слой просмотра (представление доставляется большую часть времени) и временный слой, который отображается во время загрузки следующего местоположения / сцены тура.

Страница хорошо работает на ноутбуке, он даже работает на моем iPhone 6S iOS 13.3, но только для восьми или около того изменений сцены, а затем браузер Safari падает.

Я подготовил урезанную версию кода для облегчения чтения и уменьшения сложностей и разместил ее с изображениями на https://www.virtualmountains.co.uk/X/4V4T_NoSwitching.html.

Код ниже ... 

<!DOCTYPE HTML>
<HTML lang="en">
<HEAD>
    <title>3D Test Scene</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="pannellum.css"/>
    <script src="pannellum.js"></script>
    <script src="libpannellum.js"></script>

<STYLE>

    body {font-family:"Arial","sans serif"; font-size:9pt; color:black; text-align:justify; font-weight:normal; }

    #viewingLayer {position:absolute; width:100%; height:100%; top:0; left:0; z-index:10;}
    #transitionLayer {position:absolute; width:100%; height:100%; top:0; left:0; z-index:5;}

    #panoramaVA {position:absolute; width:50%; height:100%; top:0; left:0; z-index:20;}
    #panoramaVB {position:absolute; width:50%; height:100%; top:0; left:50%; z-index:20;}
    #panoramaVC {position:absolute; width:50%; height:100%; top:0; left:0; z-index:10;}
    #panoramaVD {position:absolute; width:50%; height:100%; top:0; left:50%; z-index:10;}

    #panoramaTA {position:absolute; width:50%; height:100%; top:0; left:0; z-index:20;}
    #panoramaTB {position:absolute; width:50%; height:100%; top:0; left:50%; z-index:20;}
    #panoramaTC {position:absolute; width:50%; height:100%; top:0; left:0; z-index:10;}
    #panoramaTD {position:absolute; width:50%; height:100%; top:0; left:50%; z-index:10;}

    #OverTheTop {position:absolute; width:100%; height:100%; top:0; left:0; z-index:30;}
    #SceneSelection {position:absolute; width:98%; height:50px; bottom:5px; left:1%; z-index:35;}
    #sceneChanges {position:absolute; width:115px; height:15px; top:5px; left:5px; border:1px solid black; background-color:white; padding:5px; z-index:25;}
    #enableDeviceMotion {position:absolute; top:5px; right:40px; z-index:35;}

</STYLE>

</HEAD>

<BODY>

<div id="viewingLayer">
    <div id="panoramaVA"></div>
    <div id="panoramaVB"></div>
    <div id="panoramaVC"></div>
    <div id="panoramaVD"></div>
</div>

<div id="transitionLayer">
    <div id="panoramaTA"></div>
    <div id="panoramaTB"></div>
    <div id="panoramaTC"></div>
    <div id="panoramaTD"></div>
</div>

<div id="SceneSelection">
    <button onclick="addScenePart1('001x')">Boveney Chapel</button>
    <button onclick="addScenePart1('104x')">Crug Hywel</button>
    <button onclick="addScenePart1('400x')">Carreg Yr Ogof</button>
    <button onclick="addScenePart1('450x')">Foel Fawr</button>
    <button onclick="addScenePart1('500x')">Blue Bells</button>
    <button onclick="addScenePart1('510x')">Beinn Narnian</button>
    <button onclick="addScenePart1('600x')">Hut</button>
    <button onclick="addScenePart1('601x')">Bijele stijene</button>
</div>

<div id="sceneChanges">Scene Changes : 0</div>

<button id="enableDeviceMotion" onclick="enableDeviceMotionEvents()">Enable Device Motion</button>

<div id="OverTheTop"></div>

<script>

var SceneId="001x";
var lastSceneId="Start";
var PanoVAData={"type":"equirectangular"}; // to initiate
var PanoVBData={"type":"equirectangular"}; // to initiate
var PanoVCData={"type":"equirectangular"}; // to initiate
var PanoVDData={"type":"equirectangular"}; // to initiate

var PanoTAData={"type":"equirectangular"}; // to initiate
var PanoTBData={"type":"equirectangular"}; // to initiate
var PanoTCData={"type":"equirectangular"}; // to initiate
var PanoTDData={"type":"equirectangular"}; // to initiate

var IsVALoaded="No";
var IsVBLoaded="No";
var IsVCLoaded="No";
var IsVDLoaded="No";

var IsTALoaded="No";
var IsTBLoaded="No";
var IsTCLoaded="No";
var IsTDLoaded="No";

var sceneChanges=0;

var ActualYaw=0;
var ActualHFOV=0;

var PanoImageControlling=false;
var repeatPanoImageController;


window.PanoVA=pannellum.viewer('panoramaVA', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x1.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoVB=pannellum.viewer('panoramaVB', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x2.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoVC=pannellum.viewer('panoramaVC', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x3.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoVD=pannellum.viewer('panoramaVD', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x4.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoTA=pannellum.viewer('panoramaTA', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x1.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoTB=pannellum.viewer('panoramaTB', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x2.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoTC=pannellum.viewer('panoramaTC', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x2.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

window.PanoTD=pannellum.viewer('panoramaTD', {"default": {"firstScene":"start","sceneFadeDuration": 1000},"scenes": {"start": {"hfov": 100, "pitch": 0, "yaw": 0, "type": "equirectangular","panorama": "001x3.jpg","autoLoad": true, "orientationOnByDefault":true, "showControls":false}}});

PanoVA.on("load", function() {IsVALoaded="Yes";});
PanoVB.on("load", function() {IsVBLoaded="Yes";});
PanoVC.on("load", function() {IsVCLoaded="Yes";});
PanoVD.on("load", function() {IsVDLoaded="Yes";});

PanoTA.on("load", function() {IsTALoaded="Yes";});
PanoTB.on("load", function() {IsTBLoaded="Yes";});
PanoTC.on("load", function() {IsTCLoaded="Yes";});
PanoTD.on("load", function() {IsTDLoaded="Yes";});


function addScenePart1(scene)
{
    if(scene==lastSceneId){console.log("Repeat");return;}

    document.getElementById('transitionLayer').style.zIndex  = "12";
    document.getElementById('SceneSelection').style.zIndex  = "0";


    SceneId=scene;
    IsVALoaded="No";
    IsVBLoaded="No";
    IsVCLoaded="No";
    IsVDLoaded="No";

    IsTALoaded="No";
    IsTBLoaded="No";
    IsTCLoaded="No";
    IsTDLoaded="No";

    PanoVA.stopOrientation();
    PanoVB.stopOrientation();
    PanoVC.stopOrientation();
    PanoVD.stopOrientation();

    PanoTA.stopOrientation();
    PanoTB.stopOrientation();
    PanoTC.stopOrientation();
    PanoTD.stopOrientation();

    PanoTA.setYaw(PanoVA.getYaw(),0);
    PanoTA.setPitch(PanoVA.getPitch(),0);
    PanoTA.setHfov(PanoVA.getHfov(),0);

    PanoTB.setYaw(PanoVB.getYaw(),0);
    PanoTB.setPitch(PanoVB.getPitch(),0);
    PanoTB.setHfov(PanoVB.getHfov(),0);

    PanoTC.setYaw(PanoVA.getYaw(),0);
    PanoTC.setPitch(PanoVA.getPitch(),0);
    PanoTC.setHfov(PanoVA.getHfov(),0);

    PanoTD.setYaw(PanoVB.getYaw(),0);
    PanoTD.setPitch(PanoVB.getPitch(),0);
    PanoTD.setHfov(PanoVB.getHfov(),0); 

    PanoVAData.type="equirectangular";
    PanoVAData.panorama=SceneId+"1.jpg";
    PanoVAData.showControls=false;
    PanoVAData.vaov=180;
    PanoVA.addScene(SceneId+"1", PanoVAData);
    PanoVA.loadScene(SceneId+"1", 0, 0, 100);

    PanoVBData.type="equirectangular";
    PanoVBData.panorama=SceneId+"2.jpg";
    PanoVBData.showControls=false;
    PanoVB.addScene(SceneId+"2", PanoVBData);
    PanoVB.loadScene(SceneId+"2", 0, 0, 100);

    PanoVCData.type="equirectangular";
    PanoVCData.panorama=SceneId+"3.jpg";
    PanoVCData.showControls=false;
    PanoVC.addScene(SceneId+"3", PanoVCData);
    PanoVC.loadScene(SceneId+"3", 0, 0, 100);

    PanoVDData.type="equirectangular";
    PanoVDData.panorama=SceneId+"4.jpg";
    PanoVDData.showControls=false;
    PanoVD.addScene(SceneId+"4", PanoVDData);
    PanoVD.loadScene(SceneId+"4", 0, 0, 100);

    addScenePart2(scene);
}

function addScenePart2(scene)
{

    if(IsVALoaded=="Yes" && IsVBLoaded=="Yes" && IsVCLoaded=="Yes" && IsVDLoaded=="Yes")
    {
        addScenePart3(scene);
    }
    else
    {
        setTimeout(function(){addScenePart2(scene);}, 100);
    }
}


function addScenePart3(scene)
{
    document.getElementById('transitionLayer').style.zIndex  = "5";

    PanoVA.removeScene(lastSceneId+"1");
    PanoVB.removeScene(lastSceneId+"2");
    PanoVC.removeScene(lastSceneId+"3");
    PanoVD.removeScene(lastSceneId+"4");

    PanoTAData.type="equirectangular";
    PanoTAData.panorama=SceneId+"1.jpg";
    PanoTAData.showControls=false;
    PanoTAData.vaov=180;
    PanoTA.addScene(SceneId+"1", PanoTAData);
    PanoTA.loadScene(SceneId+"1", 0, 0, 100);

    PanoTBData.type="equirectangular";
    PanoTBData.panorama=SceneId+"2.jpg";
    PanoTBData.showControls=false;
    PanoTB.addScene(SceneId+"2", PanoTBData);
    PanoTB.loadScene(SceneId+"2", 0, 0, 100);

    PanoTCData.type="equirectangular";
    PanoTCData.panorama=SceneId+"3.jpg";
    PanoTCData.showControls=false;
    PanoTCData.vaov=180;
    PanoTC.addScene(SceneId+"1", PanoTCData);
    PanoTC.loadScene(SceneId+"1", 0, 0, 100);

    PanoTDData.type="equirectangular";
    PanoTDData.panorama=SceneId+"2.jpg";
    PanoTDData.showControls=false;
    PanoTD.addScene(SceneId+"2", PanoTDData);
    PanoTD.loadScene(SceneId+"2", 0, 0, 100);

    addScenePart4(scene);
}

function addScenePart4(scene)
{

    if(IsTALoaded=="Yes" && IsTBLoaded=="Yes" && IsTCLoaded=="Yes" && IsTDLoaded=="Yes")
    {
        addScenePart5(scene);
    }
    else
    {
        setTimeout(function(){addScenePart4(scene);}, 100);
    }
}

function addScenePart5(scene)
{
    PanoTA.removeScene(lastSceneId+"1");
    PanoTB.removeScene(lastSceneId+"2");
    PanoTC.removeScene(lastSceneId+"3");
    PanoTD.removeScene(lastSceneId+"4");

    PanoVA.startOrientation();
    PanoVB.startOrientation();
    PanoVC.startOrientation();
    PanoVD.startOrientation();

    PanoTA.startOrientation();
    PanoTB.startOrientation();
    PanoTC.startOrientation();
    PanoTD.startOrientation();

    sceneChanges++;
    lastSceneId=scene;

    document.getElementById('sceneChanges').innerHTML="Scene Changes : "+sceneChanges;
    setTimeout(function(){document.getElementById('SceneSelection').style.zIndex  = "35";}, 500);
}

function enableDeviceMotionEvents() 
{
    document.getElementById('enableDeviceMotion').style.zIndex  = "0";

    if (typeof DeviceMotionEvent.requestPermission === 'function') 
    {
        DeviceMotionEvent.requestPermission()
        .then(permissionState => {
            if (permissionState === 'granted') 
            {
                // DeviceMotionEvent.requestPermission() has been granted
            }
            else
            {
                // DeviceMotionEvent.requestPermission() has NOT been granted
                alert("This VR Tour will not work without access to Motion and Orientation sensors.  You may need to delete history and close your browser to be given the option again.");
            }
        })
        .catch(console.error);
    } 

    PanoVA.startOrientation();
    PanoVB.startOrientation();
    PanoVC.startOrientation();
    PanoVD.startOrientation();

    PanoTA.startOrientation();
    PanoTB.startOrientation();
    PanoTC.startOrientation();
    PanoTD.startOrientation();
}

</script>
</body>
</html>

Я ценю, что это много кода, поэтому я не ожидаю, что кто-нибудь отладит его. Он есть на тот случай, если кому-то интересно.

Мой вопрос: почему после восьми или около того смены сцены браузер создает sh?

У меня нет Ма c для который я могу привязать к своему iPhone и отлаживать / собирать любые сгенерированные сообщения об ошибках. Возможно, когда почти все находятся под замком, один из вас, ребята, может найти время, чтобы проверить это для меня.

Большое спасибо всем

...