https://ezestate.net/wp-content/plugins/wpvr-pro/lib/pannellum/src/js/pannellum.js?ver=1

1/*
2 * Pannellum - An HTML5 based Panorama Viewer
3 * Copyright (c) 2011-2019 Matthew Petroff
4 *
5 * Permission is hereby granted, free of charge, to any person obtaining a copy
6 * of this software and associated documentation files (the "Software"), to deal
7 * in the Software without restriction, including without limitation the rights
8 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 * copies of the Software, and to permit persons to whom the Software is
10 * furnished to do so, subject to the following conditions:
11 *
12 * The above copyright notice and this permission notice shall be included in
13 * all copies or substantial portions of the Software.
14 *
15 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 * THE SOFTWARE.
22 */
23
24window.pannellum = (function(window, document, undefined) {
25
26'use strict';
27
28/**
29 * Creates a new panorama viewer.
30 * @constructor
31 * @param {HTMLElement|string} container - The container (div) element for the
32 *      viewer, or its ID.
33 * @param {Object} initialConfig - Inital configuration for viewer.
34 */
35function Viewer(container, initialConfig) {
36
37var _this = this;
38
39// Declare variables
40var config,
41    renderer,
42    preview,
43    isUserInteracting = false,
44    latestInteraction = Date.now(),
45    onPointerDownPointerX = 0,
46    onPointerDownPointerY = 0,
47    onPointerDownPointerDist = -1,
48    onPointerDownYaw = 0,
49    onPointerDownPitch = 0,
50    keysDown = new Array(10),
51    fullscreenActive = false,
52    loaded,
53    error = false,
54    isTimedOut = false,
55    listenersAdded = false,
56    panoImage,
57    prevTime,
58    speed = {'yaw': 0, 'pitch': 0, 'hfov': 0},
59    animating = false,
60    orientation = false,
61    orientationYawOffset = 0,
62    autoRotateStart,
63    autoRotateSpeed = 0,
64    origHfov,
65    origPitch,
66    animatedMove = {},
67    externalEventListeners = {},
68    specifiedPhotoSphereExcludes = [],
69    update = false, // Should we update when still to render dynamic content
70    eps = 1e-6,
71    hotspotsCreated = false,
72    destroyed = false;
73
74var defaultConfig = {
75    hfov: 100,
76    minHfov: 50,
77    multiResMinHfov: false,
78    maxHfov: 120,
79    pitch: 0,
80    minPitch: undefined,
81    maxPitch: undefined,
82    yaw: 0,
83    minYaw: -180,
84    maxYaw: 180,
85    roll: 0,
86    haov: 360,
87    vaov: 180,
88    vOffset: 0,
89    autoRotate: false,
90    autoRotateInactivityDelay: -1,
91    autoRotateStopDelay: undefined,
92    type: 'equirectangular',
93    northOffset: 0,
94    showFullscreenCtrl: true,
95    dynamic: false,
96    dynamicUpdate: false,
97    doubleClickZoom: true,
98    keyboardZoom: true,
99    mouseZoom: true,
100    showZoomCtrl: true,
101    autoLoad: false,
102    showControls: true,
103    orientationOnByDefault: false,
104    hotSpotDebug: false,
105    backgroundColor: [0, 0, 0],
106    avoidShowingBackground: false,
107    animationTimingFunction: timingFunction,
108    draggable: true,
109    disableKeyboardCtrl: false,
110    crossOrigin: 'anonymous',
111    touchPanSpeedCoeffFactor: 1,
112    capturedKeyNumbers: [16, 17, 27, 37, 38, 39, 40, 61, 65, 68, 83, 87, 107, 109, 173, 187, 189],
113    friction: 0.15
114};
115
116// Translatable / configurable strings
117// Some strings contain '%s', which is a placeholder for inserted values
118// When setting strings in external configuration, `\n` should be used instead of `<br>` to insert line breaks
119defaultConfig.strings = {
120    // Labels
121    loadButtonLabel: 'Click to<br>Load<br>Panorama',
122    loadingLabel: 'Loading...',
123    bylineLabel: 'by %s',    // One substitution: author
124
125    // Errors
126    noPanoramaError: 'No panorama image was specified.',
127    fileAccessError: 'The file %s could not be accessed.',  // One substitution: file URL
128    malformedURLError: 'There is something wrong with the panorama URL.',
129    iOS8WebGLError: "Due to iOS 8's broken WebGL implementation, only " +
130                    "progressive encoded JPEGs work for your device (this " +
131                    "panorama uses standard encoding).",
132    genericWebGLError: 'Your browser does not have the necessary WebGL support to display this panorama.',
133    textureSizeError: 'This panorama is too big for your device! It\'s ' +
134                '%spx wide, but your device only supports images up to ' +
135                '%spx wide. Try another device.' +
136                ' (If you\'re the author, try scaling down the image.)',    // Two substitutions: image width, max image width
137    unknownError: 'Unknown error. Check developer console.',
138};
139
140// Initialize container
141container = typeof container === 'string' ? document.getElementById(container) : container;
142container.classList.add('pnlm-container');
143container.tabIndex = 0;
144
145// Create container for ui
146var uiContainer = document.createElement('div');
147uiContainer.className = 'pnlm-ui';
148container.appendChild(uiContainer);
149
150// Create container for renderer
151var renderContainer = document.createElement('div');
152renderContainer.className = 'pnlm-render-container';
153container.appendChild(renderContainer);
154var dragFix = document.createElement('div');
155dragFix.className = 'pnlm-dragfix';
156uiContainer.appendChild(dragFix);
157
158// Display about information on right click
159var aboutMsg = document.createElement('span');
160aboutMsg.className = 'pnlm-about-msg';
161//===wpvr commented about link from pro version==//
162// aboutMsg.innerHTML = '<a href="https://pannellum.org/" target="_blank">Pannellum</a>';
163// uiContainer.appendChild(aboutMsg);
164//===wpvr commented about link from pro version end==//
165dragFix.addEventListener('contextmenu', aboutMessage);
166
167// Create info display
168var infoDisplay = {};
169
170// Hot spot debug indicator
171var hotSpotDebugIndicator = document.createElement('div');
172hotSpotDebugIndicator.className = 'pnlm-sprite pnlm-hot-spot-debug-indicator';
173uiContainer.appendChild(hotSpotDebugIndicator);
174
175// Panorama info
176infoDisplay.container = document.createElement('div');
177infoDisplay.container.className = 'pnlm-panorama-info';
178infoDisplay.title = document.createElement('div');
179infoDisplay.title.className = 'pnlm-title-box';
180infoDisplay.container.appendChild(infoDisplay.title);
181infoDisplay.author = document.createElement('div');
182infoDisplay.author.className = 'pnlm-author-box';
183infoDisplay.container.appendChild(infoDisplay.author);
184uiContainer.appendChild(infoDisplay.container);
185
186// Load box
187infoDisplay.load = {};
188infoDisplay.load.box = document.createElement('div');
189infoDisplay.load.box.className = 'pnlm-load-box';
190infoDisplay.load.boxp = document.createElement('p');
191infoDisplay.load.box.appendChild(infoDisplay.load.boxp);
192infoDisplay.load.lbox = document.createElement('div');
193infoDisplay.load.lbox.className = 'pnlm-lbox';
194infoDisplay.load.lbox.innerHTML = '<div class="pnlm-loading"></div>';
195infoDisplay.load.box.appendChild(infoDisplay.load.lbox);
196infoDisplay.load.lbar = document.createElement('div');
197infoDisplay.load.lbar.className = 'pnlm-lbar';
198infoDisplay.load.lbarFill = document.createElement('div');
199infoDisplay.load.lbarFill.className = 'pnlm-lbar-fill';
200infoDisplay.load.lbar.appendChild(infoDisplay.load.lbarFill);
201infoDisplay.load.box.appendChild(infoDisplay.load.lbar);
202infoDisplay.load.msg = document.createElement('p');
203infoDisplay.load.msg.className = 'pnlm-lmsg';
204infoDisplay.load.box.appendChild(infoDisplay.load.msg);
205uiContainer.appendChild(infoDisplay.load.box);
206
207// Error message
208infoDisplay.errorMsg = document.createElement('div');
209infoDisplay.errorMsg.className = 'pnlm-error-msg pnlm-info-box';
210uiContainer.appendChild(infoDisplay.errorMsg);
211
212// Create controls
213var controls = {};

356            anError(config.strings.fileAccessError.replace('%s', a.outerHTML));
357        };
358
359        for (i = 0; i < panoImage.length; i++) {
360            p = config.cubeMap[i];
361            if (p == "null") { // support partial cubemap image with explicitly empty faces
362                console.log('Will use background instead of missing cubemap face ' + i);
363                onLoad();
364            } else {
365                if (config.basePath && !absoluteURL(p)) {
366                    p = config.basePath + p;
367                }
368                panoImage[i].onload = onLoad;
369                panoImage[i].onerror = onError;
370                panoImage[i].src = sanitizeURL(p);
371            }
372        }
373    } else if (config.type == 'multires') {
374        onImageLoad();
375    } else {
376        p = '';
377        if (config.basePath) {
378            p = config.basePath;
379        }
380
381        if (config.dynamic !== true) {
382            // Still image
383            p = absoluteURL(config.panorama) ? config.panorama : p + config.panorama;
384
385            panoImage.onload = function() {
386                window.URL.revokeObjectURL(this.src);  // Clean up
387                onImageLoad();
388            };
389
390            var xhr = new XMLHttpRequest();
391            xhr.onloadend = function() {
392                if (xhr.status != 200) {
393                    // Display error if image can't be loaded
394                    var a = document.createElement('a');
395                    a.href = p;
396                    a.textContent = a.href;
397                    anError(config.strings.fileAccessError.replace('%s', a.outerHTML));
398                }
399                var img = this.response;
400                parseGPanoXMP(img, p);
401                infoDisplay.load.msg.innerHTML = '';
402            };
403            xhr.onprogress = function(e) {
404                if (e.lengthComputable) {
405                    // Display progress
406                    var percent = e.loaded / e.total * 100;
407                    infoDisplay.load.lbarFill.style.width = percent + '%';
408                    var unit, numerator, denominator;
409                    if (e.total > 1e6) {
410                        unit = 'MB';
411                        numerator = (e.loaded / 1e6).toFixed(2);
412                        denominator = (e.total / 1e6).toFixed(2);
413                    } else if (e.total > 1e3) {
414                        unit = 'kB';
415                        numerator = (e.loaded / 1e3).toFixed(1);
416                        denominator = (e.total / 1e3).toFixed(1);
417                    } else {
418                        unit = 'B';
419                        numerator = e.loaded;
420                        denominator = e.total;
421                    }
422                    infoDisplay.load.msg.innerHTML = numerator + ' / ' + denominator + ' ' + unit;
423                } else {
424                    // Display loading spinner
425                    infoDisplay.load.lbox.style.display = 'block';
426                    infoDisplay.load.lbar.style.display = 'none';
427                }
428            };
429            try {
430                xhr.open('GET', p, true);
431            } catch (e) {
432                // Malformed URL
433                anError(config.strings.malformedURLError);
434            }
435            xhr.responseType = 'blob';
436            xhr.setRequestHeader('Accept', 'image/*,*/*;q=0.9');
437            xhr.withCredentials = config.crossOrigin === 'use-credentials';
438            xhr.send();
439        }
440    }
441
442    if (config.draggable)
443        uiContainer.classList.add('pnlm-grab');
444    uiContainer.classList.remove('pnlm-grabbing');
445
446    // Properly handle switching to dynamic scenes
447    update = config.dynamicUpdate === true;
448    if (config.dynamic && update) {
449        panoImage = config.panorama;
450        onImageLoad();
451    }
452}
453
454/**
455 * Test if URL is absolute or relative.
456 * @private
457 * @param {string} url - URL to test
458 * @returns {boolean} True if absolute, else false
459 */
460function absoluteURL(url) {
461    // From http://stackoverflow.com/a/19709846
462    return new RegExp('^(?:[a-z]+:)?//', 'i').test(url) || url[0] == '/' || url.slice(0, 5) == 'blob:';
463}
464
465/**
466 * Create renderer and initialize event listeners once image is loaded.
467 * @private
468 */
469function onImageLoad() {
470    if (!renderer)
471        renderer = new libpannellum.renderer(renderContainer);
472
473    // Only add event listeners once
474    if (!listenersAdded) {
475        listenersAdded = true;
476        dragFix.addEventListener('mousedown', onDocumentMouseDown, false);
477        document.addEventListener('mousemove', onDocumentMouseMove, false);
478        document.addEventListener('mouseup', onDocumentMouseUp, false);
479        if (config.mouseZoom) {
480            uiContainer.addEventListener('mousewheel', onDocumentMouseWheel, false);
481            uiContainer.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
482        }
483        if (config.doubleClickZoom) {
484            dragFix.addEventListener('dblclick', onDocumentDoubleClick, false);
485        }
486        container.addEventListener('mozfullscreenchange', onFullScreenChange, false);
487        container.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
488        container.addEventListener('msfullscreenchange', onFullScreenChange, false);
489        container.addEventListener('fullscreenchange', onFullScreenChange, false);
490        window.addEventListener('resize', onDocumentResize, false);
491        window.addEventListener('orientationchange', onDocumentResize, false);
492        if (!config.disableKeyboardCtrl) {
493            container.addEventListener('keydown', onDocumentKeyPress, false);
494            container.addEventListener('keyup', onDocumentKeyUp, false);
495            container.addEventListener('blur', clearKeys, false);
496        }
497        document.addEventListener('mouseleave', onDocumentMouseUp, false);
498        if (document.documentElement.style.pointerAction === '' &&
499            document.documentElement.style.touchAction === '') {
500            dragFix.addEventListener('pointerdown', onDocumentPointerDown, false);
501            dragFix.addEventListener('pointermove', onDocumentPointerMove, false);
502            dragFix.addEventListener('pointerup', onDocumentPointerUp, false);
503            dragFix.addEventListener('pointerleave', onDocumentPointerUp, false);
504        } else {
505            dragFix.addEventListener('touchstart', onDocumentTouchStart, false);
506            dragFix.addEventListener('touchmove', onDocumentTouchMove, false);
507            dragFix.addEventListener('touchend', onDocumentTouchEnd, false);
508        }
509
510        // Deal with MS pointer events
511        if (window.navigator.pointerEnabled)

836    if (Date.now() - latestInteraction > 15) {
837        // Prevents jump when user rapidly moves mouse, stops, and then
838        // releases the mouse button
839        speed.pitch = speed.yaw = 0;
840    }
841    uiContainer.classList.add('pnlm-grab');
842    uiContainer.classList.remove('pnlm-grabbing');
843    latestInteraction = Date.now();
844
845    fireEvent('mouseup', event);
846}
847
848/**
849 * Event handler for touches. Initializes panning if one touch or zooming if
850 * two touches.
851 * @private
852 * @param {TouchEvent} event - Document touch start event.
853 */
854function onDocumentTouchStart(event) {
855    // Only do something if the panorama is loaded
856    if (!loaded || !config.draggable) {
857        return;
858    }
859
860    // Turn off auto-rotation if enabled
861    stopAnimation();
862
863    stopOrientation();
864    config.roll = 0;
865
866    speed.hfov = 0;
867
868    // Calculate touch position relative to top left of viewer container
869    var pos0 = mousePosition(event.targetTouches[0]);
870
871    onPointerDownPointerX = pos0.x;
872    onPointerDownPointerY = pos0.y;
873
874    if (event.targetTouches.length == 2) {
875        // Down pointer is the center of the two fingers
876        var pos1 = mousePosition(event.targetTouches[1]);
877        onPointerDownPointerX += (pos1.x - pos0.x) * 0.5;
878        onPointerDownPointerY += (pos1.y - pos0.y) * 0.5;
879        onPointerDownPointerDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) +
880                                             (pos0.y - pos1.y) * (pos0.y - pos1.y));
881    }
882    isUserInteracting = true;
883    latestInteraction = Date.now();
884
885    onPointerDownYaw = config.yaw;
886    onPointerDownPitch = config.pitch;
887
888    fireEvent('touchstart', event);
889    animateInit();
890}
891
892/**
893 * Event handler for touch movements. Pans center of view if one touch or
894 * adjusts zoom if two touches.
895 * @private
896 * @param {TouchEvent} event - Document touch move event.
897 */
898function onDocumentTouchMove(event) {
899    if (!config.draggable) {
900        return;
901    }
902
903    // Override default action
904    event.preventDefault();
905    if (loaded) {
906        latestInteraction = Date.now();
907    }
908    if (isUserInteracting && loaded) {
909        var pos0 = mousePosition(event.targetTouches[0]);
910        var clientX = pos0.x;
911        var clientY = pos0.y;
912
913        if (event.targetTouches.length == 2 && onPointerDownPointerDist != -1) {
914            var pos1 = mousePosition(event.targetTouches[1]);
915            clientX += (pos1.x - pos0.x) * 0.5;
916            clientY += (pos1.y - pos0.y) * 0.5;
917            var clientDist = Math.sqrt((pos0.x - pos1.x) * (pos0.x - pos1.x) +
918                                       (pos0.y - pos1.y) * (pos0.y - pos1.y));
919            setHfov(config.hfov + (onPointerDownPointerDist - clientDist) * 0.1);
920            onPointerDownPointerDist = clientDist;
921        }
922
923        // The smaller the config.hfov value (the more zoomed-in the user is), the faster
924        // yaw/pitch are perceived to change on one-finger touchmove (panning) events and vice versa.
925        // To improve usability at both small and large zoom levels (config.hfov values)
926        // we introduce a dynamic pan speed coefficient.
927        //
928        // Currently this seems to *roughly* keep initial drag/pan start position close to
929        // the user's finger while panning regardless of zoom level / config.hfov value.
930        var touchmovePanSpeedCoeff = (config.hfov / 360) * config.touchPanSpeedCoeffFactor;
931
932        var yaw = (onPointerDownPointerX - clientX) * touchmovePanSpeedCoeff + onPointerDownYaw;
933        speed.yaw = (yaw - config.yaw) % 360 * 0.2;
934        config.yaw = yaw;
935
936        var pitch = (clientY - onPointerDownPointerY) * touchmovePanSpeedCoeff + onPointerDownPitch;
937        speed.pitch = (pitch - config.pitch) * 0.2;
938        config.pitch = pitch;
939    }
940}
941
942/**
943 * Event handler for end of touches. Stops panning and/or zooming.
944 * @private
945 */
946function onDocumentTouchEnd() {
947    isUserInteracting = false;
948    if (Date.now() - latestInteraction > 150) {
949        speed.pitch = speed.yaw = 0;
950    }
951    onPointerDownPointerDist = -1;
952    latestInteraction = Date.now();
953
954    fireEvent('touchend', event);
955}
956
957var pointerIDs = [],
958    pointerCoordinates = [];
959/**
960 * Event handler for touch starts in IE / Edge.
961 * @private
962 * @param {PointerEvent} event - Document pointer down event.
963 */
964function onDocumentPointerDown(event) {
965    if (event.pointerType == 'touch') {
966        // Only do something if the panorama is loaded
967        if (!loaded || !config.draggable)
968            return;
969        pointerIDs.push(event.pointerId);
970        pointerCoordinates.push({clientX: event.clientX, clientY: event.clientY});
971        event.targetTouches = pointerCoordinates;
972        onDocumentTouchStart(event);
973        event.preventDefault();
974    }
975}
976
977/**
978 * Event handler for touch moves in IE / Edge.
979 * @private
980 * @param {PointerEvent} event - Document pointer move event.
981 */
982function onDocumentPointerMove(event) {
983    if (event.pointerType == 'touch') {
984        if (!config.draggable)
985            return;
986        for (var i = 0; i < pointerIDs.length; i++) {
987            if (event.pointerId == pointerIDs[i]) {
988                pointerCoordinates[i].clientX = event.clientX;
989                pointerCoordinates[i].clientY = event.clientY;
990                event.targetTouches = pointerCoordinates;
991                onDocumentTouchMove(event);
992                event.preventDefault();
993                return;
994            }
995        }
996    }
997}
998
999/**
1000 * Event handler for touch ends in IE / Edge.
1001 * @private
1002 * @param {PointerEvent} event - Document pointer up event.
1003 */
1004function onDocumentPointerUp(event) {
1005    if (event.pointerType == 'touch') {
1006        var defined = false;
1007        for (var i = 0; i < pointerIDs.length; i++) {
1008            if (event.pointerId == pointerIDs[i])
1009                pointerIDs[i] = undefined;
1010            if (pointerIDs[i])
1011                defined = true;
1012        }
1013        if (!defined) {
1014            pointerIDs = [];
1015            pointerCoordinates = [];
1016            onDocumentTouchEnd();
1017        }
1018        event.preventDefault();
1019    }
1020}
1021
1022/**
1023 * Event handler for mouse wheel. Changes zoom.
1024 * @private
1025 * @param {WheelEvent} event - Document mouse wheel event.
1026 */
1027function onDocumentMouseWheel(event) {
1028    // Only do something if the panorama is loaded and mouse wheel zoom is enabled
1029    if (!loaded || (config.mouseZoom == 'fullscreenonly' && !fullscreenActive)) {
1030        return;
1031    }
1032
1033    event.preventDefault();
1034
1035    // Turn off auto-rotation if enabled
1036    stopAnimation();
1037    latestInteraction = Date.now();
1038
1039    if (event.wheelDeltaY) {
1040        // WebKit
1041        setHfov(config.hfov - event.wheelDeltaY * 0.05);
1042        speed.hfov = event.wheelDelta < 0 ? 1 : -1;
1043    } else if (event.wheelDelta) {
1044        // Opera / Explorer 9
1045        setHfov(config.hfov - event.wheelDelta * 0.05);
1046        speed.hfov = event.wheelDelta < 0 ? 1 : -1;
1047    } else if (event.detail) {
1048        // Firefox
1049        setHfov(config.hfov + event.detail * 1.5);
1050        speed.hfov = event.detail > 0 ? 1 : -1;
1051    }
1052    animateInit();
1053}
1054
1055/**
1056 * Event handler for key presses. Updates list of currently pressed keys.
1057 * @private
1058 * @param {KeyboardEvent} event - Document key press event.
1059 */
1060function onDocumentKeyPress(event) {
1061    // Turn off auto-rotation if enabled
1062    stopAnimation();
1063    latestInteraction = Date.now();
1064
1065    stopOrientation();
1066    config.roll = 0;
1067
1068    // Record key pressed
1069    var keynumber = event.which || event.keycode;
1070
1071    // Override default action for keys that are used
1072    if (config.capturedKeyNumbers.indexOf(keynumber) < 0)
1073        return;
1074    event.preventDefault();
1075
1076    // If escape key is pressed
1077    if (keynumber == 27) {
1078        // If in fullscreen mode
1079        if (fullscreenActive) {
1080            toggleFullscreen();
1081        }
1082    } else {
1083        // Change key
1084        changeKey(keynumber, true);
1085    }
1086}
1087
1088/**
1089 * Clears list of currently pressed keys.
1090 * @private
1091 */
1092function clearKeys() {
1093    for (var i = 0; i < 10; i++) {
1094        keysDown[i] = false;
1095    }
1096}
1097
1098/**
1099 * Event handler for key releases. Updates list of currently pressed keys.
1100 * @private
1101 * @param {KeyboardEvent} event - Document key up event.
1102 */
1103function onDocumentKeyUp(event) {
1104    // Record key pressed
1105    var keynumber = event.which || event.keycode;
1106
1107    // Override default action for keys that are used
1108    if (config.capturedKeyNumbers.indexOf(keynumber) < 0)
1109        return;
1110    event.preventDefault();
1111
1112    // Change key
1113    changeKey(keynumber, false);
1114}
1115
1116/**
1117 * Updates list of currently pressed keys.
1118 * @private
1119 * @param {number} keynumber - Key number.
1120 * @param {boolean} value - Whether or not key is pressed.
1121 */
1122function changeKey(keynumber, value) {
1123    var keyChanged = false;
1124    switch(keynumber) {
1125        // If minus key is released
1126        case 109: case 189: case 17: case 173:
1127            if (keysDown[0] != value) { keyChanged = true; }
1128            keysDown[0] = value; break;
1129
1130        // If plus key is released
1131        case 107: case 187: case 16: case 61:
1132            if (keysDown[1] != value) { keyChanged = true; }
1133            keysDown[1] = value; break;
1134
1135        // If up arrow is released
1136        case 38:
1137            if (keysDown[2] != value) { keyChanged = true; }
1138            keysDown[2] = value; break;
1139
1140        // If "w" is released
1141        case 87:
1142            if (keysDown[6] != value) { keyChanged = true; }
1143            keysDown[6] = value; break;
1144
1145        // If down arrow is released
1146        case 40:
1147            if (keysDown[3] != value) { keyChanged = true; }
1148            keysDown[3] = value; break;
1149
1150        // If "s" is released
1151        case 83:
1152            if (keysDown[7] != value) { keyChanged = true; }
1153            keysDown[7] = value; break;
1154
1155        // If left arrow is released
1156        case 37:
1157            if (keysDown[4] != value) { keyChanged = true; }
1158            keysDown[4] = value; break;
1159
1160        // If "a" is released
1161        case 65:
1162            if (keysDown[8] != value) { keyChanged = true; }
1163            keysDown[8] = value; break;
1164
1165        // If right arrow is released
1166        case 39:
1167            if (keysDown[5] != value) { keyChanged = true; }
1168            keysDown[5] = value; break;
1169
1170        // If "d" is released
1171        case 68:
1172            if (keysDown[9] != value) { keyChanged = true; }
1173            keysDown[9] = value;
1174    }
1175
1176    if (keyChanged && value) {
1177        if (typeof performance !== 'undefined' && performance.now()) {
1178            prevTime = performance.now();
1179        } else {
1180            prevTime = Date.now();
1181        }
1182        animateInit();
1183    }
1184}
1185
1186/**
1187 * Pans and/or zooms panorama based on currently pressed keys. Also handles
1188 * panorama "inertia" and auto rotation.
1189 * @private
1190 */
1191function keyRepeat() {
1192    // Only do something if the panorama is loaded
1193    if (!loaded) {
1194        return;
1195    }
1196
1197    var isKeyDown = false;
1198
1199    var prevPitch = config.pitch;
1200    var prevYaw = config.yaw;
1201    var prevZoom = config.hfov;
1202
1203    var newTime;
1204    if (typeof performance !== 'undefined' && performance.now()) {
1205        newTime = performance.now();
1206    } else {
1207        newTime = Date.now();
1208    }
1209    if (prevTime === undefined) {
1210        prevTime = newTime;
1211    }
1212    var diff = (newTime - prevTime) * config.hfov / 1700;
1213    diff = Math.min(diff, 1.0);
1214
1215    // If minus key is down
1216    if (keysDown[0] && config.keyboardZoom === true) {
1217        setHfov(config.hfov + (speed.hfov * 0.8 + 0.5) * diff);
1218        isKeyDown = true;
1219    }
1220
1221    // If plus key is down
1222    if (keysDown[1] && config.keyboardZoom === true) {
1223        setHfov(config.hfov + (speed.hfov * 0.8 - 0.2) * diff);
1224        isKeyDown = true;
1225    }
1226
1227    // If up arrow or "w" is down
1228    if (keysDown[2] || keysDown[6]) {
1229        // Pan up
1230        config.pitch += (speed.pitch * 0.8 + 0.2) * diff;
1231        isKeyDown = true;
1232    }
1233
1234    // If down arrow or "s" is down
1235    if (keysDown[3] || keysDown[7]) {
1236        // Pan down
1237        config.pitch += (speed.pitch * 0.8 - 0.2) * diff;
1238        isKeyDown = true;
1239    }
1240
1241    // If left arrow or "a" is down
1242    if (keysDown[4] || keysDown[8]) {
1243        // Pan left
1244        config.yaw += (speed.yaw * 0.8 - 0.2) * diff;
1245        isKeyDown = true;
1246    }
1247
1248    // If right arrow or "d" is down
1249    if (keysDown[5] || keysDown[9]) {
1250        // Pan right
1251        config.yaw += (speed.yaw * 0.8 + 0.2) * diff;
1252        isKeyDown = true;
1253    }
1254
1255    if (isKeyDown)
1256        latestInteraction = Date.now();
1257
1258    // If auto-rotate
1259    if (config.autoRotate) {
1260        // Pan
1261        if (newTime - prevTime > 0.001) {
1262            var timeDiff = (newTime - prevTime) / 1000;
1263            var yawDiff = (speed.yaw / timeDiff * diff - config.autoRotate * 0.2) * timeDiff;
1264            yawDiff = (-config.autoRotate > 0 ? 1 : -1) * Math.min(Math.abs(config.autoRotate * timeDiff), Math.abs(yawDiff));
1265            config.yaw += yawDiff;
1266        }
1267
1268        // Deal with stopping auto rotation after a set delay
1269        if (config.autoRotateStopDelay) {
1270            config.autoRotateStopDelay -= newTime - prevTime;
1271            if (config.autoRotateStopDelay <= 0) {
1272                config.autoRotateStopDelay = false;
1273                autoRotateSpeed = config.autoRotate;
1274                config.autoRotate = 0;
1275            }
1276        }
1277    }
1278
1279    // Animated moves
1280    if (animatedMove.pitch) {
1281        animateMove('pitch');
1282        prevPitch = config.pitch;
1283    }
1284    if (animatedMove.yaw) {
1285        animateMove('yaw');
1286        prevYaw = config.yaw;
1287    }
1288    if (animatedMove.hfov) {
1289        animateMove('hfov');
1290        prevZoom = config.hfov;
1291    }
1292
1293    // "Inertia"
1294    if (diff > 0 && !config.autoRotate) {
1295        // "Friction"
1296        var slowDownFactor = 1 - config.friction;
1297
1298        // Yaw
1299        if (!keysDown[4] && !keysDown[5] && !keysDown[8] && !keysDown[9] && !animatedMove.yaw) {
1300            config.yaw += speed.yaw * diff * slowDownFactor;
1301        }
1302        // Pitch
1303        if (!keysDown[2] && !keysDown[3] && !keysDown[6] && !keysDown[7] && !animatedMove.pitch) {
1304            config.pitch += speed.pitch * diff * slowDownFactor;
1305        }
1306        // Zoom
1307        if (!keysDown[0] && !keysDown[1] && !animatedMove.hfov) {
1308            setHfov(config.hfov + speed.hfov * diff * slowDownFactor);
1309        }
1310    }
1311
1312    prevTime = newTime;
1313    if (diff > 0) {
1314        speed.yaw = speed.yaw * 0.8 + (config.yaw - prevYaw) / diff * 0.2;
1315        speed.pitch = speed.pitch * 0.8 + (config.pitch - prevPitch) / diff * 0.2;
1316        speed.hfov = speed.hfov * 0.8 + (config.hfov - prevZoom) / diff * 0.2;
1317
1318        // Limit speed
1319        var maxSpeed = config.autoRotate ? Math.abs(config.autoRotate) : 5;
1320        speed.yaw = Math.min(maxSpeed, Math.max(speed.yaw, -maxSpeed));
1321        speed.pitch = Math.min(maxSpeed, Math.max(speed.pitch, -maxSpeed));
1322        speed.hfov = Math.min(maxSpeed, Math.max(speed.hfov, -maxSpeed));
1323    }
1324
1325    // Stop movement if opposite controls are pressed
1326    if (keysDown[0] && keysDown[1]) {
1327        speed.hfov = 0;
1328    }
1329    if ((keysDown[2] || keysDown[6]) && (keysDown[3] || keysDown[7])) {
1330        speed.pitch = 0;
1331    }
1332    if ((keysDown[4] || keysDown[8]) && (keysDown[5] || keysDown[9])) {
1333        speed.yaw = 0;
1334    }
1335}
1336
1337/**
1338 * Animates moves.
1339 * @param {string} axis - Axis to animate
1340 * @private
1341 */
1342function animateMove(axis) {
1343    var t = animatedMove[axis];
1344    var normTime = Math.min(1, Math.max((Date.now() - t.startTime) / 1000 / (t.duration / 1000), 0));
1345    var result = t.startPosition + config.animationTimingFunction(normTime) * (t.endPosition - t.startPosition);
1346    if ((t.endPosition > t.startPosition && result >= t.endPosition) ||
1347        (t.endPosition < t.startPosition && result <= t.endPosition) ||
1348        t.endPosition === t.startPosition) {
1349        result = t.endPosition;
1350        speed[axis] = 0;
1351        delete animatedMove[axis];
1352    }
1353    config[axis] = result;
1354}
1355
1356/**
1357 * @param {number} t - Normalized time in animation
1358 * @return {number} Position in animation
1359 * @private
1360 */
1361function timingFunction(t) {
1362    // easeInOutQuad from https://gist.github.com/gre/1650294
1363    return t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
1364}
1365

1494            config.yaw = Math.max(minYaw, Math.min(maxYaw, config.yaw));
1495        }
1496
1497        if (!(config.autoRotate !== false)) {
1498            // When not auto-rotating, this check needs to happen after the
1499            // previous check (see issue #698)
1500            if (config.yaw > 360) {
1501                config.yaw -= 360;
1502            } else if (config.yaw < -360) {
1503                config.yaw += 360;
1504            }
1505        }
1506
1507        // Check if we autoRotate in a limited by min and max yaw
1508        // If so reverse direction
1509        if (config.autoRotate !== false && tmpyaw != config.yaw &&
1510            prevTime !== undefined) { // this condition prevents changing the direction initially
1511            config.autoRotate *= -1;
1512        }
1513
1514        // Ensure the calculated pitch is within min and max allowed
1515        var vfov = 2 * Math.atan(Math.tan(config.hfov / 180 * Math.PI * 0.5) /
1516            (canvas.width / canvas.height)) / Math.PI * 180;
1517        var minPitch = config.minPitch + vfov / 2,
1518            maxPitch = config.maxPitch - vfov / 2;
1519        var pitchRange = config.maxPitch - config.minPitch;
1520        if (pitchRange < vfov) {
1521            // Lock pitch to average of min and max pitch when both can be seen at once
1522            minPitch = maxPitch = (minPitch + maxPitch) / 2;
1523        }
1524        if (isNaN(minPitch))
1525            minPitch = -90;
1526        if (isNaN(maxPitch))
1527            maxPitch = 90;
1528        config.pitch = Math.max(minPitch, Math.min(maxPitch, config.pitch));
1529
1530        renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {roll: config.roll * Math.PI / 180});
1531
1532        renderHotSpots();
1533
1534        // Update compass
1535        if (config.compass) {
1536            compass.style.transform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)';
1537            compass.style.webkitTransform = 'rotate(' + (-config.yaw - config.northOffset) + 'deg)';
1538        }
1539    }
1540}
1541
1542/**
1543 * Creates a new quaternion.
1544 * @private
1545 * @constructor
1546 * @param {Number} w - W value
1547 * @param {Number} x - X value
1548 * @param {Number} y - Y value
1549 * @param {Number} z - Z value
1550 */
1551function Quaternion(w, x, y, z) {
1552    this.w = w;
1553    this.x = x;
1554    this.y = y;
1555    this.z = z;
1556}
1557
1558/**
1559 * Multiplies quaternions.
1560 * @private
1561 * @param {Quaternion} q - Quaternion to multiply
1562 * @returns {Quaternion} Result of multiplication
1563 */
1564Quaternion.prototype.multiply = function(q) {
1565    return new Quaternion(this.w*q.w - this.x*q.x - this.y*q.y - this.z*q.z,
1566                          this.x*q.w + this.w*q.x + this.y*q.z - this.z*q.y,
1567                          this.y*q.w + this.w*q.y + this.z*q.x - this.x*q.z,
1568                          this.z*q.w + this.w*q.z + this.x*q.y - this.y*q.x);
1569};
1570
1571/**
1572 * Converts quaternion to Euler angles.
1573 * @private
1574 * @returns {Number[]} [phi angle, theta angle, psi angle]
1575 */
1576Quaternion.prototype.toEulerAngles = function() {
1577    var phi = Math.atan2(2 * (this.w * this.x + this.y * this.z),
1578                         1 - 2 * (this.x * this.x + this.y * this.y)),
1579        theta = Math.asin(2 * (this.w * this.y - this.z * this.x)),
1580        psi = Math.atan2(2 * (this.w * this.z + this.x * this.y),
1581                         1 - 2 * (this.y * this.y + this.z * this.z));
1582    return [phi, theta, psi];
1583};
1584
1585/**
1586 * Converts device orientation API Tait-Bryan angles to a quaternion.
1587 * @private
1588 * @param {Number} alpha - Alpha angle (in degrees)
1589 * @param {Number} beta - Beta angle (in degrees)
1590 * @param {Number} gamma - Gamma angle (in degrees)
1591 * @returns {Quaternion} Orientation quaternion
1592 */
1593function taitBryanToQuaternion(alpha, beta, gamma) {
1594    var r = [beta ? beta * Math.PI / 180 / 2 : 0,
1595             gamma ? gamma * Math.PI / 180 / 2 : 0,
1596             alpha ? alpha * Math.PI / 180 / 2 : 0];
1597    var c = [Math.cos(r[0]), Math.cos(r[1]), Math.cos(r[2])],
1598        s = [Math.sin(r[0]), Math.sin(r[1]), Math.sin(r[2])];
1599
1600    return new Quaternion(c[0]*c[1]*c[2] - s[0]*s[1]*s[2],
1601                          s[0]*c[1]*c[2] - c[0]*s[1]*s[2],
1602                          c[0]*s[1]*c[2] + s[0]*c[1]*s[2],
1603                          c[0]*c[1]*s[2] + s[0]*s[1]*c[2]);
1604}
1605
1606/**
1607 * Computes current device orientation quaternion from device orientation API
1608 * Tait-Bryan angles.
1609 * @private
1610 * @param {Number} alpha - Alpha angle (in degrees)
1611 * @param {Number} beta - Beta angle (in degrees)
1612 * @param {Number} gamma - Gamma angle (in degrees)
1613 * @returns {Quaternion} Orientation quaternion
1614 */
1615function computeQuaternion(alpha, beta, gamma) {
1616    // Convert Tait-Bryan angles to quaternion
1617    var quaternion = taitBryanToQuaternion(alpha, beta, gamma);
1618    // Apply world transform
1619    quaternion = quaternion.multiply(new Quaternion(Math.sqrt(0.5), -Math.sqrt(0.5), 0, 0));
1620    // Apply screen transform
1621    var angle = window.orientation ? -window.orientation * Math.PI / 180 / 2 : 0;
1622    return quaternion.multiply(new Quaternion(Math.cos(angle), 0, -Math.sin(angle), 0));
1623}
1624
1625/**
1626 * Event handler for device orientation API. Controls pointing.
1627 * @private
1628 * @param {DeviceOrientationEvent} event - Device orientation event.
1629 */
1630function orientationListener(e) {
1631    var q = computeQuaternion(e.alpha, e.beta, e.gamma).toEulerAngles();
1632    if (typeof(orientation) == 'number' && orientation < 10) {
1633        // This kludge is necessary because iOS sometimes provides a few stale
1634        // device orientation events when the listener is removed and then
1635        // readded. Thus, we skip the first 10 events to prevent this from
1636        // causing problems.
1637        orientation += 1;
1638    } else if (orientation === 10) {
1639        // Record starting yaw to prevent jumping
1640        orientationYawOffset = q[2] / Math.PI * 180 + config.yaw;
1641        orientation = true;
1642        requestAnimationFrame(animate);
1643    } else {
1644        config.pitch = q[0] / Math.PI * 180;
1645        config.roll = -q[1] / Math.PI * 180;
1646        config.yaw = -q[2] / Math.PI * 180 + orientationYawOffset;
1647    }
1648}
1649
1650/**
1651 * Initializes renderer.
1652 * @private
1653 */
1654function renderInit() {
1655    try {
1656        var params = {};
1657        if (config.horizonPitch !== undefined)
1658            params.horizonPitch = config.horizonPitch * Math.PI / 180;
1659        if (config.horizonRoll !== undefined)
1660            params.horizonRoll = config.horizonRoll * Math.PI / 180;
1661        if (config.backgroundColor !== undefined)
1662            params.backgroundColor = config.backgroundColor;
1663        renderer.init(panoImage, config.type, config.dynamic, config.haov * Math.PI / 180, config.vaov * Math.PI / 180, config.vOffset * Math.PI / 180, renderInitCallback, params);
1664        if (config.dynamic !== true) {
1665            // Allow image to be garbage collected
1666            panoImage = undefined;
1667        }
1668    } catch(event) {
1669        // Panorama not loaded
1670
1671        // Display error if there is a bad texture
1672        if (event.type == 'webgl error' || event.type == 'no webgl') {
1673            anError();
1674        } else if (event.type == 'webgl size error') {
1675            anError(config.strings.textureSizeError.replace('%s', event.width).replace('%s', event.maxWidth));
1676        } else {
1677            anError(config.strings.unknownError);
1678            throw event;
1679        }
1680    }
1681}
1682
1683/**
1684 * Triggered when render initialization finishes. Handles fading between
1685 * scenes as well as showing the compass and hotspots and hiding the loading
1686 * display.
1687 * @private
1688 */
1689function renderInitCallback() {
1690    // Fade if specified
1691    if (config.sceneFadeDuration && renderer.fadeImg !== undefined) {
1692        renderer.fadeImg.style.opacity = 0;
1693        // Remove image
1694        var fadeImg = renderer.fadeImg;
1695        delete renderer.fadeImg;
1696        setTimeout(function() {
1697            renderContainer.removeChild(fadeImg);
1698            fireEvent('scenechangefadedone');
1699        }, config.sceneFadeDuration);
1700    }
1701
1702    // Show compass if applicable
1703    if (config.compass) {
1704        compass.style.display = 'inline';
1705    } else {
1706        compass.style.display = 'none';
1707    }
1708
1709    // Show hotspots
1710    createHotSpots();
1711
1712    // Hide loading display
1713    infoDisplay.load.box.style.display = 'none';
1714    if (preview !== undefined) {
1715        renderContainer.removeChild(preview);
1716        preview = undefined;
1717    }
1718    loaded = true;
1719
1720    animateInit();
1721
1722    fireEvent('load');
1723}
1724
1725/**
1726 * Creates hot spot element for the current scene.
1727 * @private
1728 * @param {Object} hs - The configuration for the hotspot
1729 */
1730function createHotSpot(hs) {
1731    // Make sure hot spot pitch and yaw are numbers
1732    hs.pitch = Number(hs.pitch) || 0;
1733    hs.yaw = Number(hs.yaw) || 0;
1734
1735    var div = document.createElement('div');
1736    div.className = 'pnlm-hotspot-base';
1737    if (hs.cssClass)
1738        div.className += ' ' + hs.cssClass;
1739    else
1740        div.className += ' pnlm-hotspot pnlm-sprite pnlm-' + escapeHTML(hs.type);
1741
1742    var span = document.createElement('span');
1743    if (hs.text)
1744        span.innerHTML = escapeHTML(hs.text);
1745
1746    var a;
1747    if (hs.video) {
1748        var video = document.createElement('video'),
1749            vidp = hs.video;
1750        if (config.basePath && !absoluteURL(vidp))
1751            vidp = config.basePath + vidp;
1752        video.src = sanitizeURL(vidp);
1753        video.controls = true;
1754        video.style.width = hs.width + 'px';
1755        renderContainer.appendChild(div);
1756        span.appendChild(video);
1757    } else if (hs.image) {
1758        var imgp = hs.image;
1759        if (config.basePath && !absoluteURL(imgp))
1760            imgp = config.basePath + imgp;
1761        a = document.createElement('a');
1762        a.href = sanitizeURL(hs.URL ? hs.URL : imgp, true);
1763        a.target = '_blank';
1764        span.appendChild(a);
1765        var image = document.createElement('img');
1766        image.src = sanitizeURL(imgp);
1767        image.style.width = hs.width + 'px';
1768        image.style.paddingTop = '5px';
1769        renderContainer.appendChild(div);
1770        a.appendChild(image);
1771        span.style.maxWidth = 'initial';
1772    } else if (hs.URL) {
1773        a = document.createElement('a');
1774        a.href = sanitizeURL(hs.URL, true);
1775        if (hs.attributes) {
1776            for (var key in hs.attributes) {
1777                a.setAttribute(key, hs.attributes[key]);
1778            }
1779        } else {
1780            a.target = '_blank';
1781        }
1782        renderContainer.appendChild(a);
1783        div.className += ' pnlm-pointer';
1784        span.className += ' pnlm-pointer';
1785        a.appendChild(div);
1786    } else {
1787        if (hs.sceneId) {
1788            div.onclick = div.ontouchend = function() {
1789                if (!div.clicked) {
1790                    div.clicked = true;
1791                    loadScene(hs.sceneId, hs.targetPitch, hs.targetYaw, hs.targetHfov);
1792                }
1793                return false;

2188    }
2189    if (resize !== 'resize')
2190        fireEvent('fullscreenchange', fullscreenActive);
2191    // Resize renderer (deal with browser quirks and fixes #155)
2192    renderer.resize();
2193    setHfov(config.hfov);
2194    animateInit();
2195}
2196
2197/**
2198 * Increases panorama zoom. For use with zoom button.
2199 * @private
2200 */
2201function zoomIn() {
2202    if (loaded) {
2203        setHfov(config.hfov - 5);
2204        animateInit();
2205    }
2206}
2207
2208/**
2209 * Decreases panorama zoom. For use with zoom button.
2210 * @private
2211 */
2212function zoomOut() {
2213    if (loaded) {
2214        setHfov(config.hfov + 5);
2215        animateInit();
2216    }
2217}
2218
2219/**
2220 * Clamps horzontal field of view to viewer's limits.
2221 * @private
2222 * @param {number} hfov - Input horizontal field of view (in degrees)
2223 * @return {number} - Clamped horizontal field of view (in degrees)
2224 */
2225function constrainHfov(hfov) {
2226    // Keep field of view within bounds
2227    var minHfov = config.minHfov;
2228    if (config.type == 'multires' && renderer && !config.multiResMinHfov) {
2229        minHfov = Math.min(minHfov, renderer.getCanvas().width / (config.multiRes.cubeResolution / 90 * 0.9));
2230    }
2231    if (minHfov > config.maxHfov) {
2232        // Don't change view if bounds don't make sense
2233        console.log('HFOV bounds do not make sense (minHfov > maxHfov).');
2234        return config.hfov;
2235    }
2236    var newHfov = config.hfov;
2237    if (hfov < minHfov) {
2238        newHfov = minHfov;
2239    } else if (hfov > config.maxHfov) {
2240        newHfov = config.maxHfov;
2241    } else {
2242        newHfov = hfov;
2243    }
2244    // Optionally avoid showing background (empty space) on top or bottom by adapting newHfov
2245    if (config.avoidShowingBackground && renderer) {
2246        var canvas = renderer.getCanvas();
2247        newHfov = Math.min(newHfov,
2248                           Math.atan(Math.tan((config.maxPitch - config.minPitch) / 360 * Math.PI) /
2249                                     canvas.height * canvas.width) * 360 / Math.PI);
2250    }
2251    return newHfov;
2252}
2253
2254/**
2255 * Sets viewer's horizontal field of view.
2256 * @private
2257 * @param {number} hfov - Desired horizontal field of view in degrees.
2258 */
2259function setHfov(hfov) {
2260    config.hfov = constrainHfov(hfov);
2261    fireEvent('zoomchange', config.hfov);
2262}
2263
2264/**
2265 * Stops auto rotation and animated moves.
2266 * @private
2267 */
2268function stopAnimation() {
2269    animatedMove = {};
2270    autoRotateSpeed = config.autoRotate ? config.autoRotate : autoRotateSpeed;
2271    config.autoRotate = false;
2272}
2273
2274/**
2275 * Loads panorama.
2276 * @private
2277 */
2278function load() {
2279    // Since WebGL error handling is very general, first we clear any error box
2280    // since it is a new scene and the error from previous maybe because of lacking
2281    // memory etc and not because of a lack of WebGL support etc
2282    clearError();
2283    loaded = false;
2284
2285    controls.load.style.display = 'none';
2286    infoDisplay.load.box.style.display = 'inline';
2287    init();
2288}
2289
2290/**
2291 * Loads scene.
2292 * @private
2293 * @param {string} sceneId - Identifier of scene configuration to merge in.
2294 * @param {number} targetPitch - Pitch viewer should be centered on once scene loads.
2295 * @param {number} targetYaw - Yaw viewer should be centered on once scene loads.
2296 * @param {number} targetHfov - HFOV viewer should use once scene loads.
2297 * @param {boolean} [fadeDone] - If `true`, fade setup is skipped.
2298 */
2299function loadScene(sceneId, targetPitch, targetYaw, targetHfov, fadeDone) {
2300    if (!loaded)
2301        fadeDone = true;    // Don't try to fade when there isn't a scene loaded
2302    loaded = false;
2303    animatedMove = {};
2304
2305    // Set up fade if specified
2306    var fadeImg, workingPitch, workingYaw, workingHfov;
2307    if (config.sceneFadeDuration && !fadeDone) {
2308        var data = renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {returnImage: true});
2309        if (data !== undefined) {
2310            fadeImg = new Image();
2311            fadeImg.className = 'pnlm-fade-img';
2312            fadeImg.style.transition = 'opacity ' + (config.sceneFadeDuration / 1000) + 's';
2313            fadeImg.style.width = '100%';
2314            fadeImg.style.height = '100%';
2315            fadeImg.onload = function() {
2316                loadScene(sceneId, targetPitch, targetYaw, targetHfov, true);
2317            };
2318            fadeImg.src = data;
2319            renderContainer.appendChild(fadeImg);
2320            renderer.fadeImg = fadeImg;
2321            return;
2322        }
2323    }
2324
2325    // Set new pointing
2326    if (targetPitch === 'same') {
2327        workingPitch = config.pitch;
2328    } else {
2329        workingPitch = targetPitch;
2330    }
2331    if (targetYaw === 'same') {
2332        workingYaw = config.yaw;
2333    } else if (targetYaw === 'sameAzimuth') {
2334        workingYaw = config.yaw + (config.northOffset || 0) - (initialConfig.scenes[sceneId].northOffset || 0);
2335    } else {
2336        workingYaw = targetYaw;
2337    }
2338    if (targetHfov === 'same') {
2339        workingHfov = config.hfov;
2340    } else {
2341        workingHfov = targetHfov;
2342    }
2343
2344    // Destroy hot spots from previous scene
2345    destroyHotSpots();
2346
2347    // Create the new config for the scene
2348    mergeConfig(sceneId);
2349
2350    // Stop motion
2351    speed.yaw = speed.pitch = speed.hfov = 0;
2352
2353    // Reload scene
2354    processOptions();
2355    if (workingPitch !== undefined) {
2356        config.pitch = workingPitch;
2357    }
2358    if (workingYaw !== undefined) {
2359        config.yaw = workingYaw;
2360    }
2361    if (workingHfov !== undefined) {
2362        config.hfov = workingHfov;
2363    }
2364    fireEvent('scenechange', sceneId);
2365    load();
2366}
2367
2368/**
2369 * Stop using device orientation.
2370 * @private
2371 */
2372function stopOrientation() {
2373    window.removeEventListener('deviceorientation', orientationListener);
2374    controls.orientation.classList.remove('pnlm-orientation-button-active');
2375    orientation = false;