Веб-страница с несколькими программами просмотра pannellum вылетает на iPhone 6S iOS 13.3
Я разрабатываю веб-страницу с 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>
Я понимаю, что это большой объем кода, поэтому я не ожидаю, что кто-нибудь его отладит. Он там, если кому-то интересно.
У меня вопрос: почему после восьми или около того изменений сцены происходит сбой браузера?
У меня нет Mac, к которому я могу привязать свой iPhone и отлаживать / собирать сообщения об ошибках. Возможно, когда почти все находятся взаперти, один из вас, ребята, найдет время, чтобы проверить это для меня.
Большое спасибо всем