@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/element/panorama.js

@@ -0,0 +1,812 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { EventHub } from '../utils/event-hub';
+import { Events, OwllyEvents } from '../utils/events';
+import { TextureCache } from '../utils/texture-cache';
+import { DeviceUtils } from '../utils/device-utils';
+import { CubeTextureCache } from '../utils/cube-texture-cache';
+/**
+ * 全景图对象
+ * @noInheritDoc
+ */
+class Panorama extends Element {
+    /**
+     * @param textureURLs 低清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param highTextureURLs 高清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param useLowTextureURLsOnly 可选，设置后则（如果没有提供瓦片贴图）只使用低清立方体贴图
+     * @param tiledTextureURLRoot 可选，瓦片贴图URL的前缀部分，若没有则用highTextureURLs和lowTextureURLs作为贴图源
+     */
+    constructor(pid, seqID, textureURLs, faceGridsSize, neighborPanoramaIDs = [], highTextureURLs, useLowTextureURLsOnly, tiledTextureURLRoot, position, quaternion, legacyMode = false) {
+        super();
+        const { THREE } = Externals.getInstance();
+        this.pid = pid;
+        this.seqID = seqID;
+        this.highTextureURLs = highTextureURLs || [];
+        this.textureURLs = textureURLs;
+        this.useLowTextureURLsOnly = !!useLowTextureURLsOnly;
+        this.tiledTextureURLRoot = tiledTextureURLRoot;
+        this.neighborPanoramaIDs = neighborPanoramaIDs;
+        this.viewConfigurations = new Map();
+        this.panoViews = new Set();
+        this.initialized = false;
+        this.needsUpdate = false;
+        this.legacyMode = legacyMode;
+        const boxGeometry = new THREE.BoxBufferGeometry(2, 2, 2);
+        this.wireFrame = new THREE.LineSegments(new THREE.EdgesGeometry(boxGeometry), new THREE.LineBasicMaterial({ color: 0xff0000 }));
+        this.wireFrame.material.visible = false;
+        this.wireFrame.renderOrder = 100;
+        this.add(this.wireFrame);
+        const sphereGeometry = new THREE.SphereBufferGeometry(1, 60, 40);
+        sphereGeometry.scale(1, -1, 1);
+        sphereGeometry.rotateY(-90 * Math.PI / 180.0);
+        this.sphereMesh = new THREE.Mesh(sphereGeometry);
+        this.sphereMesh.visible = false;
+        this.sphereMesh.renderOrder = 150;
+        this.add(this.sphereMesh);
+        this.isPlayingVideo = false;
+        this.videoCanvas = null;
+        this.videoContentType = 'mp4';
+        if (this.legacyMode) {
+            // do nothing now
+            const vertexShader = `
+        varying vec3 v_position;
+        void main(){
+            v_position = position;
+            v_position.y = v_position.y * -1.0;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }`;
+            const fragmentShader = `
+        uniform samplerCube tCube;
+        varying vec3 v_position;
+        void main(){
+            gl_FragColor = textureCube(tCube, v_position);
+        }`;
+            const uniforms = {
+                tCube: {
+                    type: 't',
+                    value: null,
+                },
+            };
+            this.uniforms = uniforms;
+            this.material = new THREE.ShaderMaterial({
+                fragmentShader,
+                vertexShader,
+                uniforms,
+                depthTest: false,
+                side: THREE.BackSide,
+            });
+            this.skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(2, 32, 32));
+            // this.skyBox.visible = false;// /!!!#TiledCube#
+            // 设置天空盒不被视锥裁剪，这样天空盒资源就能直接加载到GPU里面
+            this.skyBox.frustumCulled = false;
+            this.skyBox.material = this.material;
+            this.skyBox.renderOrder = 100;
+            this.add(this.skyBox);
+            this.updateTexture();
+        }
+        else {
+            const faceVertexShader = `
+        varying vec2 vUv;
+        void main(){
+           vUv = uv;
+           gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }`;
+            const faceFragmentShader = `
+          uniform sampler2D tFaceTexture;
+          uniform vec2 uvScalar;
+          uniform vec2 uvOffset;
+          uniform vec4 blendColor;
+          varying vec2 vUv;
+          void main(){
+            vec2 UV = vUv * uvScalar + uvOffset;
+             vec4 texColor = texture2D(tFaceTexture, vec2(UV.s, 1.0 - UV.t));
+             gl_FragColor = (1.0 - blendColor.a) * texColor + blendColor.a * blendColor;
+            //  gl_FragColor = vec4(vUv, 0.0, 1.0);
+          }`;
+            [this.faceGridRows, this.faceGridCols] = faceGridsSize;
+            const gridWidth = 2 / faceGridsSize[1];
+            const gridHeight = 2 / faceGridsSize[0];
+            this.faceGridsStates = [];
+            this.faceGridTextureCacheKeys = [];
+            this.panoViews = new Set();
+            this.faceGridsMaterials = [];
+            this.faceGridsUniformses = [];
+            this.skyBoxFaceGrids = [];
+            this.gridCenters = [];
+            for (let iFace = 0; iFace < 6; iFace++) {
+                const gridsStates = [];
+                const gridTextureCacheKeys = [];
+                const gridsUniforms = [];
+                const gridsMaterials = [];
+                const gridsMeshes = [];
+                const gridCenterRows = [];
+                for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+                    const gridCenterRowCols = [];
+                    for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+                        const gridIndex = iRow * faceGridsSize[1] + iCol;
+                        gridsStates[gridIndex] = 0;
+                        gridTextureCacheKeys[gridIndex] = '';
+                        gridsUniforms[gridIndex] = {
+                            tFaceTexture: {
+                                type: 't',
+                                value: null,
+                            },
+                            uvScalar: {
+                                type: 'v2',
+                                value: new THREE.Vector2(1, 1),
+                            },
+                            uvOffset: {
+                                type: 'v2',
+                                value: new THREE.Vector2(0, 0),
+                            },
+                            blendColor: {
+                                type: 'v4',
+                                value: new THREE.Vector4(0, 0, 0, 0),
+                            },
+                        };
+                        gridsMaterials[gridIndex] = new THREE.ShaderMaterial({
+                            fragmentShader: faceFragmentShader,
+                            vertexShader: faceVertexShader,
+                            uniforms: gridsUniforms[gridIndex],
+                            depthTest: false,
+                            side: THREE.BackSide,
+                        });
+                        const skyBoxFaceGeometry = new THREE.PlaneBufferGeometry(gridWidth, gridHeight);
+                        const skyBoxFaceMesh = new THREE.Mesh(skyBoxFaceGeometry, gridsMaterials[gridIndex]);
+                        gridsMeshes[gridIndex] = skyBoxFaceMesh;
+                        skyBoxFaceMesh.visible = true;
+                        // 设置天空盒不被视锥裁剪，这样天空盒资源就能直接加载到GPU里面
+                        skyBoxFaceMesh.frustumCulled = false;
+                        skyBoxFaceMesh.material = gridsMaterials[gridIndex];
+                        skyBoxFaceMesh.renderOrder = 100;
+                        this.add(skyBoxFaceMesh);
+                        gridCenterRowCols[iCol] = new THREE.Vector4(0, 0, 0, 1);
+                    }
+                    gridCenterRows[iRow] = gridCenterRowCols;
+                }
+                this.faceGridsStates[iFace] = gridsStates;
+                this.faceGridTextureCacheKeys[iFace] = gridTextureCacheKeys;
+                this.faceGridsUniformses[iFace] = gridsUniforms;
+                this.faceGridsMaterials[iFace] = gridsMaterials;
+                this.skyBoxFaceGrids[iFace] = gridsMeshes;
+                this.gridCenters[iFace] = gridCenterRows;
+            }
+            const T2 = new THREE.Matrix4();
+            const R1 = new THREE.Matrix4();
+            for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+                for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+                    const gridIndex = iRow * faceGridsSize[1] + iCol;
+                    for (let iFace = 0; iFace < 6; iFace++) {
+                        T2.makeTranslation(gridWidth / 2 - 1 + gridWidth * iCol, gridHeight / 2 - 1 + gridHeight * iRow, 0);
+                        this.skyBoxFaceGrids[iFace][gridIndex].applyMatrix4(T2);
+                        this.gridCenters[iFace][iRow][iCol].applyMatrix4(T2);
+                    }
+                }
+            }
+            for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+                for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+                    const gridIndex = iRow * faceGridsSize[1] + iCol;
+                    T2.makeTranslation(1, 0, 0);
+                    R1.makeRotationY(Math.PI / 2);
+                    this.skyBoxFaceGrids[0][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[0][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[0][gridIndex].translateX(1.0).rotateY(Math.PI / 2);// R
+                    this.gridCenters[0][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                    T2.makeTranslation(-1, 0, 0);
+                    R1.makeRotationY(-Math.PI / 2);
+                    this.skyBoxFaceGrids[1][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[1][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[1][gridIndex].translateX(-1.0).rotateY(-Math.PI / 2);// L
+                    this.gridCenters[1][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                    T2.makeTranslation(0, -1, 0);
+                    R1.makeRotationX(Math.PI / 2);
+                    this.skyBoxFaceGrids[2][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[2][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[2][gridIndex].translateY(-1.0).rotateX(Math.PI / 2);// T
+                    this.gridCenters[2][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                    T2.makeTranslation(0, 1, 0);
+                    R1.makeRotationX(-Math.PI / 2);
+                    this.skyBoxFaceGrids[3][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[3][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[3][gridIndex].translateY(1.0).rotateX(-Math.PI / 2);// D
+                    this.gridCenters[3][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                    T2.makeTranslation(0, 0, 1);
+                    R1.makeTranslation(0, 0, 0);
+                    this.skyBoxFaceGrids[4][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[4][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[4][gridIndex].translateZ(1.0);// F
+                    this.gridCenters[4][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                    T2.makeTranslation(0, 0, -1);
+                    R1.makeRotationY(Math.PI);
+                    this.skyBoxFaceGrids[5][gridIndex].applyMatrix4(R1); // /???
+                    this.skyBoxFaceGrids[5][gridIndex].applyMatrix4(T2);
+                    // this.skyBoxFaceGrids[5][gridIndex].translateZ(-1.0).rotateY(Math.PI);// B
+                    this.gridCenters[5][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+                }
+            }
+        }
+        if (position) {
+            this.position.copy(position);
+        }
+        if (quaternion) {
+            this.quaternion.copy(quaternion);
+        }
+        this.baseQuaternion = new THREE.Quaternion().copy(this.quaternion);
+        this.additionalQuaternion = new THREE.Quaternion();
+        /* eslint-disable no-underscore-dangle */
+        const onQuaternionChangeCallback = this.quaternion._onChangeCallback;
+        this.quaternion._onChange(() => {
+            onQuaternionChangeCallback();
+            const targetQuaternion = new THREE.Quaternion().multiplyQuaternions(this.baseQuaternion, this.additionalQuaternion);
+            if (targetQuaternion.equals(this.quaternion))
+                return;
+            this.baseQuaternion = this.quaternion.clone();
+            const { x, y, z, w, } = new THREE.Quaternion().multiplyQuaternions(this.baseQuaternion, this.additionalQuaternion);
+            this.quaternion.set(x, y, z, w);
+            this.needsUpdate = true;
+        });
+        const onRotationChangeCallback = this.rotation._onChangeCallback;
+        this.rotation._onChange(() => {
+            onRotationChangeCallback();
+            const reverse = this.additionalQuaternion.clone().invert();
+            this.baseQuaternion = this.quaternion.clone().multiply(reverse);
+        });
+        this.eventListeners = {
+            onPanoramaSelected: (panorama) => {
+                this.isSelected = panorama === this;
+                if (!this.isSelected)
+                    return;
+                this.emit(Events.PANORAMA_SELECTED, this.pid);
+            },
+            onEnded: () => { },
+        };
+        EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onPanoramaSelected);
+    }
+    /**
+     * 为全景图对象设置立方体贴图
+     * @param cubeTexture 立方体贴图对象
+     */
+    setTexture(cubeTexture) {
+        this.uniforms.tCube.value = cubeTexture;
+        this.needsUpdate = true;
+        if (!this.panoramaLoaded) {
+            this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+        }
+        this.panoramaLoaded = true;
+    }
+    /**
+     * 暂停视频播放
+     */
+    pauseVideo() {
+        if (this.videoContentType === 'ts') {
+            if (this.mpegVideoPlayer)
+                this.mpegVideoPlayer.pause();
+        }
+        else {
+            const videoElementID = `pano_vid_${this.pid}`;
+            this.video = this.video || document.getElementById(videoElementID);
+            if (!this.video) {
+                return;
+            }
+            this.video.pause();
+        }
+    }
+    /**
+     * 恢复视频播放
+     */
+    resumeVideo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.videoContentType === 'ts') {
+                if (this.mpegVideoPlayer)
+                    this.mpegVideoPlayer.play();
+            }
+            else {
+                const videoElementID = `pano_vid_${this.pid}`;
+                this.video = this.video || document.getElementById(videoElementID);
+                if (!this.video) {
+                    return;
+                }
+                yield this.video.play();
+            }
+        });
+    }
+    /**
+     * 停止视频播放，并释放视频相关资源
+     */
+    stopVideo() {
+        this.sphereMesh.visible = false;
+        if (this.videoContentType === 'ts') {
+            if (this.mpegVideoPlayer) {
+                this.mpegVideoPlayer.stop();
+                this.mpegVideoPlayer.destroy();
+                this.mpegVideoPlayer = null;
+            }
+            const canvasTexture = this.sphereMesh.material.map;
+            if (canvasTexture)
+                canvasTexture.dispose();
+            this.sphereMesh.material.dispose();
+            this.videoCanvas = null;
+        }
+        else {
+            const videoElementID = `pano_vid_${this.pid}`;
+            this.video = this.video || document.getElementById(videoElementID);
+            const videoTexture = this.sphereMesh.material.map;
+            if (videoTexture) {
+                videoTexture.dispose();
+            }
+            this.sphereMesh.material.dispose();
+            if (this.video) {
+                this.video.pause();
+                this.video.removeAttribute('src');
+                this.video.load();
+                this.video = null;
+            }
+        }
+        if (this.eventListeners.onEnded)
+            this.eventListeners.onEnded();
+        this.isPlayingVideo = false;
+        this.needsUpdate = true;
+    }
+    /**
+     * 开始视频播放
+     * @param videoURL 视频地址
+     * @param loop 是否循环播放
+     * @param callbacks 回调函数集合，可选
+     */
+    playVideo(videoURL, loop, callbacks, contentType = 'mp4', canvasSize = [2048, 2048]) {
+        const { onReadyToPlay, onEnded, onPrepareToPlay } = callbacks || {};
+        this.videoContentType = contentType;
+        const { THREE } = Externals.getInstance();
+        this.eventListeners.onEnded = onEnded || (() => { });
+        if (this.videoContentType === 'ts') {
+            if (!JSMpeg || !JSMpeg.Player)
+                throw new Error('JSMpeg is needed. Please get JSMpeg from https://github.com/phoboslab/jsmpeg');
+            if (!this.videoCanvas) {
+                this.videoCanvas = document.createElement('canvas');
+                [this.videoCanvas.width, this.videoCanvas.height] = canvasSize;
+            }
+            this.mpegVideoPlayer = new JSMpeg.Player(videoURL, {
+                canvas: this.videoCanvas,
+                loop,
+                autoplay: false,
+                disableGl: false,
+                onSourceEstablished: () => {
+                    this.needsUpdate = true;
+                    if (onPrepareToPlay)
+                        onPrepareToPlay();
+                },
+                onPlay: () => {
+                    this.sphereMesh.visible = true;
+                    this.needsUpdate = true;
+                    if (onReadyToPlay)
+                        onReadyToPlay();
+                    this.isPlayingVideo = true;
+                },
+                onPause: () => { },
+                onStalled: () => { },
+                onEnded: () => {
+                    this.stopVideo();
+                },
+                chunkSize: 8 * 1024 * 1024,
+                videoBufferSize: 8 * 512 * 1024,
+                decodeFirstFrame: false,
+                preserveDrawingBuffer: false,
+            });
+            const texture = new THREE.CanvasTexture(this.videoCanvas);
+            texture.needsUpdate = true;
+            if (DeviceUtils.DetectIOS())
+                texture.flipY = false;
+            this.sphereMesh.material = new THREE.MeshBasicMaterial({
+                map: texture,
+                // side: DoubleSide,
+                transparent: false,
+                depthTest: false,
+                depthWrite: false,
+            });
+            this.mpegVideoPlayer.source.established = false;
+            this.mpegVideoPlayer.source.loadedSize = 0;
+            this.mpegVideoPlayer.demuxer.startTime = 0;
+            this.mpegVideoPlayer.demuxer.currentTime = 0;
+            this.mpegVideoPlayer.demuxer.bits = null;
+            this.mpegVideoPlayer.demuxer.leftoverBytes = null;
+            this.mpegVideoPlayer.audioOut.resetEnqueuedTime();
+            this.mpegVideoPlayer.audioOut.unlock();
+            this.mpegVideoPlayer.seek(0);
+            this.mpegVideoPlayer.play();
+        }
+        else {
+            const videoElementID = `pano_vid_${this.pid}`;
+            this.video = document.getElementById(videoElementID);
+            if (!this.video) {
+                this.video = document.createElement('video');
+                this.video.id = videoElementID;
+                this.video.setAttribute('webkit-playsinline', 'true');
+                this.video.setAttribute('x5-playsinline', 'true');
+                this.video.setAttribute('playsinline', 'true');
+                this.video.setAttribute('crossorigin', 'anonymous');
+                // console.info('#Video# video', video);
+            }
+            this.video.src = videoURL;
+            this.video.loop = !!loop;
+            this.video.addEventListener('playing', () => {
+                // console.info('#Video# playing', ev);
+                this.sphereMesh.visible = true;
+                this.needsUpdate = true;
+                if (onReadyToPlay) {
+                    onReadyToPlay(this.video);
+                }
+                this.isPlayingVideo = true;
+            });
+            this.video.addEventListener('ended', () => {
+                this.stopVideo();
+            });
+            this.video.addEventListener('play', () => {
+                // console.info('#Video# play', ev);
+                this.needsUpdate = true;
+                if (onPrepareToPlay) {
+                    onPrepareToPlay(this.video);
+                }
+            });
+            this.video.play();
+            const texture = new THREE.VideoTexture(this.video);
+            texture.needsUpdate = true;
+            this.sphereMesh.material = new THREE.MeshBasicMaterial({
+                map: texture,
+                // side: DoubleSide,
+                transparent: false,
+                depthTest: false,
+                depthWrite: false,
+            });
+            return this.video;
+        }
+        return null;
+    }
+    getIntersectedTiles(camera) {
+        if (!camera) {
+            return {
+                hdTiles: [],
+                ldTiles: [],
+            };
+        }
+        const { THREE } = Externals.getInstance();
+        this.updateMatrixWorld();
+        camera.updateMatrixWorld();
+        const cameraPosition = camera.position.clone();
+        const gridCenters = this.gridCenters.map((face) => {
+            const newFace = face.map((row) => {
+                const newRow = row.map((v) => {
+                    const v4 = v.clone().applyMatrix4(this.matrixWorld);
+                    return new THREE.Vector3(v4.x, v4.y, v4.z).sub(cameraPosition).normalize();
+                });
+                return newRow;
+            });
+            return newFace;
+        });
+        const lookDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+        const retHDTiles = [];
+        const retLDTiles = [];
+        const cos45 = Math.SQRT1_2;
+        for (let iFace = 0; iFace < 6; iFace++) {
+            for (let iRow = 0; iRow < this.faceGridRows; iRow++) {
+                for (let iCol = 0; iCol < this.faceGridCols; iCol++) {
+                    const dot = gridCenters[iFace][iRow][iCol].dot(lookDirection);
+                    if (dot >= cos45) {
+                        retHDTiles.push([iFace, iRow, iCol, dot]);
+                        // } else if (dot >= 0) {
+                        //   retLDTiles.push([iFace, iRow, iCol, dot]);
+                    }
+                    else {
+                        retLDTiles.push([iFace, iRow, iCol, dot]); // TODO(dqiu): 优化此处
+                    }
+                }
+            }
+        }
+        if (this.isPlayingVideo) {
+            return {
+                hdTiles: [],
+                ldTiles: retLDTiles,
+            };
+        }
+        return {
+            hdTiles: retHDTiles,
+            ldTiles: retLDTiles,
+        };
+    }
+    // /**
+    //  * 为天空盒设置六个面的贴图
+    //  * @param textures 天空盒六个面的贴图数组，按右左上下前后顺序
+    //  */
+    // private setFaceTextures(textures: Texture[]): void {
+    //   for (let i = 0; i < 6; i++) {
+    //     this.faceUniformses[i].tFaceTexture.value = textures[i];
+    //   }
+    //   this.needsUpdate = true;
+    // }
+    setFaceTexture(faceRowColDot, texture, uniformValues, cacheKey) {
+        const { THREE } = Externals.getInstance();
+        const faceIndex = faceRowColDot[0];
+        const gridRow = faceRowColDot[1];
+        const gridCol = faceRowColDot[2];
+        // const dot = faceRowColDot[3];
+        const gridIndex = gridRow * this.faceGridCols + gridCol;
+        this.faceGridsUniformses[faceIndex][gridIndex].tFaceTexture.value = texture;
+        // const divCols = 1 / this.faceGridCols;
+        // const divRows = 1 / this.faceGridRows;
+        const { uvScalar, uvOffset, blendColor } = uniformValues || {};
+        this.faceGridsUniformses[faceIndex][gridIndex].uvScalar.value = uvScalar || new THREE.Vector2(1, 1);
+        this.faceGridsUniformses[faceIndex][gridIndex].uvOffset.value = uvOffset || new THREE.Vector2(0, 0);
+        this.faceGridsUniformses[faceIndex][gridIndex].blendColor.value = blendColor || new THREE.Vector4(0, 0, 0, 0);
+        // this.faceGridsUniformses[faceIndex][gridIndex].blendColor.value = new Vector4(dot, 0, 1 - dot, 0.5);// /!!!For Debug
+        // console.info(`#TiledCube# setFaceTexture (face, row, col)=(${faceIndex}, ${gridRow}, ${gridCol}):`, texture);
+        if (cacheKey) {
+            this.faceGridTextureCacheKeys[faceIndex][gridIndex] = cacheKey;
+        }
+        this.needsUpdate = true;
+    }
+    // /**
+    //  * 异步加载立方体贴图
+    //  * @param textureURLs 新的立方体贴图六面图像URL（如果需要更新的话）
+    //  */
+    updateTexture(textureURLs) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.legacyMode) {
+                if (textureURLs) {
+                    this.textureURLs = textureURLs;
+                }
+                const cubeTexture = yield CubeTextureCache.sharedInstance.loadCubeTexture(this.textureURLs);
+                this.setTexture(cubeTexture);
+            }
+            else {
+                for (let f = 0; f < 6; f++) {
+                    for (let g = this.faceGridCols * this.faceGridRows - 1; g >= 0; g--) {
+                        this.faceGridsStates[f][g] = 0;
+                    }
+                }
+                if (textureURLs) {
+                    this.highTextureURLs = textureURLs;
+                    this.textureURLs = textureURLs;
+                }
+            }
+            this.needsUpdate = true;
+        });
+    }
+    /**
+     * @param hdFaceGrids [][faceIndex, row, col]
+     */
+    updateHDGridTextures(hdFaceGrids) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.useLowTextureURLsOnly) {
+                return [];
+            }
+            const { THREE } = Externals.getInstance();
+            if (this.tiledTextureURLRoot) {
+                // console.log('#TiledCube# updateHDGridTextures with tiles');
+                const faceName = ['r', 'l', 't', 'd', 'f', 'b'];
+                // const hdTextureURLs = hdFaceGrids.map((value: number[]) => this.highTextureURLs[value[0]]);
+                const hdTextureURLs = hdFaceGrids.map((value) => `${this.tiledTextureURLRoot}${this.seqID}_${faceName[value[0]]}_${value[1]}-${value[2]}`);
+                // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} Before hdFaceTexturesCache.preloadTextures()#1 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+                const hdTextures = yield TextureCache.hdFaceTexturesCache.preloadTextures(hdTextureURLs, hdFaceGrids.length);
+                // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} After hdFaceTexturesCache.preloadTextures()#1 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+                for (let i = hdFaceGrids.length - 1; i >= 0; i--) {
+                    this.setFaceTexture(hdFaceGrids[i], hdTextures[i], undefined, hdTextureURLs[i]);
+                }
+                return hdTextures;
+            }
+            if (!this.highTextureURLs.length) {
+                return [];
+            }
+            const hdTextureURLs = hdFaceGrids.map((value) => `${this.highTextureURLs[value[0]]}`);
+            // console.log(`#TiledCube# hdTextureURLs[0]=${hdTextureURLs[0]}`);
+            // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} Before hdFaceTexturesCache.preloadTextures()#2 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+            const hdTextures = yield TextureCache.hdFaceTexturesCache.preloadTextures(hdTextureURLs, hdFaceGrids.length);
+            // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} After hdFaceTexturesCache.preloadTextures()#2 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+            const uvScalar = new THREE.Vector2(1.0 / this.faceGridCols, 1.0 / this.faceGridRows);
+            for (let i = hdFaceGrids.length - 1; i >= 0; i--) {
+                const uvOffset = new THREE.Vector2(uvScalar.x * hdFaceGrids[i][2], uvScalar.y * hdFaceGrids[i][1]);
+                this.setFaceTexture(hdFaceGrids[i], hdTextures[i], {
+                    uvScalar,
+                    uvOffset,
+                }, hdTextureURLs[i]);
+            }
+            return hdTextures;
+        });
+    }
+    updateLDGridTextures(ldFaceGrids) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { THREE } = Externals.getInstance();
+            // const ldTextureURLs = ldFaceGrids.map((value: number[]) => this.highTextureURLs[value[0]]);
+            const ldTextureURLs = ldFaceGrids.map((value) => `${this.textureURLs[value[0]]}`);
+            // console.info(`#TextureLeak# Panorama.updateLDGridTextures #${this.pid} Before ldFaceTexturesCache.preloadTextures()#1 ${ldFaceGrids.length} tiles, LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+            const ldTextures = yield TextureCache.ldFaceTexturesCache.preloadTextures(ldTextureURLs, ldFaceGrids.length);
+            // console.info(`#TextureLeak# Panorama.updateLDGridTextures #${this.pid} After ldFaceTexturesCache.preloadTextures()#1 ${ldFaceGrids.length} tiles, LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+            const uvScalar = new THREE.Vector2(1.0 / this.faceGridCols, 1.0 / this.faceGridRows);
+            for (let i = ldFaceGrids.length - 1; i >= 0; i--) {
+                const uvOffset = new THREE.Vector2(uvScalar.x * ldFaceGrids[i][2], uvScalar.y * ldFaceGrids[i][1]);
+                this.setFaceTexture(ldFaceGrids[i], ldTextures[i], {
+                    uvScalar,
+                    uvOffset,
+                }, ldTextureURLs[i]);
+            }
+            return ldTextures;
+        });
+    }
+    /**
+     * 异步加载天空盒贴图，优先从cache中获取
+     * @param textureURLs 新的天空盒贴图六面图像URL（如果需要更新的话）
+     */
+    updateFaceGridsTextures(hdFaceGrids, ldFaceGrids) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.panoramaLoaded) {
+                this.emit(Events.WILL_LOAD_PANORAMA, this.pid);
+            }
+            const newHDFaceGrids = [];
+            hdFaceGrids.forEach((grid) => {
+                if (this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] !== 2) {
+                    newHDFaceGrids.push(grid);
+                }
+            });
+            yield this.updateLDGridTextures(newHDFaceGrids);
+            const newLDFaceGrids = [];
+            ldFaceGrids.forEach((grid) => {
+                if (this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] !== 1) {
+                    newLDFaceGrids.push(grid);
+                }
+            });
+            yield this.updateLDGridTextures(newLDFaceGrids);
+            // console.info('#TiledCube# LD faces updated:', ldFaceGrids);
+            for (let f = 0; f < 6; f++) {
+                for (let g = this.faceGridRows * this.faceGridCols - 1; g >= 0; g--) {
+                    this.faceGridsStates[f][g] = 0;
+                }
+            }
+            hdFaceGrids.forEach((grid) => {
+                this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] = 2;
+            });
+            ldFaceGrids.forEach((grid) => {
+                this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] = 1;
+            });
+            this.updateHDGridTextures(newHDFaceGrids);
+            if (!this.panoramaLoaded) {
+                this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+            }
+            this.panoramaLoaded = true;
+        });
+    }
+    // /**
+    //  * 若立方体贴图还未加载过，则加载，否则无操作
+    //  */
+    // public async loadTextureIfNecessary(): Promise<CubeTexture> {
+    //   if (!this.uniforms.tCube.value) {
+    //     return this.updateTexture();
+    //   }
+    //   return this.uniforms.tCube.value;
+    // }
+    // /**
+    //  * 设置线框的显示隐藏
+    //  * @param visible 是否显示线框，同时隐藏立方体贴图
+    //  */
+    // public setFrameVisible(visible: boolean): void {
+    //   this.wireFrame.visible = visible;
+    //   this.skyBox.visible = !visible;
+    //   this.needsUpdate = true;
+    // }
+    /**
+     * 设置是否只使用低分辨率贴图
+     * @param useLowTexturesOnly 是否只使用低分辨率贴图
+     */
+    setUseLowTexturesOnly(useLowTexturesOnly) {
+        this.useLowTextureURLsOnly = useLowTexturesOnly;
+    }
+    isUseLowTexturesOnly() {
+        return this.useLowTextureURLsOnly;
+    }
+    dispose() {
+        super.dispose();
+        // 销毁材质资源
+        // if (this.material) {
+        //   this.material.dispose();
+        // }
+        // // 销毁天空盒实体资源
+        // if (this.skyBox.geometry) {
+        //   this.skyBox.geometry.dispose();
+        // }
+        if (this.faceGridsMaterials) {
+            this.faceGridsMaterials.forEach((materials) => {
+                materials.forEach((material) => {
+                    material.dispose();
+                });
+            });
+        }
+        if (this.skyBoxFaceGrids) {
+            this.skyBoxFaceGrids.forEach((meshes) => {
+                meshes.forEach((mesh) => {
+                    if (mesh.geometry) {
+                        mesh.geometry.dispose();
+                    }
+                });
+            });
+        }
+        this.stopVideo();
+        if (this.eventListeners.onEnded)
+            this.eventListeners.onEnded = null;
+        if (this.sphereMesh && this.sphereMesh.material) {
+            this.sphereMesh.material.dispose();
+        }
+        this.initialized = false;
+        EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onPanoramaSelected);
+    }
+    /**
+     * @ignore
+     */
+    update() {
+        const frameContext = new ElementFrameContext(this);
+        if (!this.initialized) {
+            this.initialized = true;
+            frameContext.needUpdate = true;
+        }
+        else if (this.needsUpdate || this.isPlayingVideo) {
+            frameContext.needUpdate = true;
+            if (this.isPlayingVideo && this.videoCanvas && this.sphereMesh.material.map) {
+                this.sphereMesh.material.map.needsUpdate = true;
+            }
+            this.needsUpdate = false;
+        }
+        if (this.initialized && !this.parent) {
+            frameContext.shouldPlaceElement = true;
+        }
+        return frameContext;
+    }
+    /**
+     * 使用欧拉角模式设置矫正
+     * @param roll 横滚角, 坐标轴为x
+     * @param pitch 俯仰角, 坐标轴为y
+     * @param yaw 偏航角, 坐标轴为z
+     */
+    setAdditionalRotationInEuler(roll, pitch, yaw) {
+        const { THREE } = Externals.getInstance();
+        this.additionalQuaternion.setFromEuler(new THREE.Euler(roll, pitch, yaw));
+        const { x, y, z, w, } = this.baseQuaternion.clone().multiply(this.additionalQuaternion);
+        this.quaternion.set(x, y, z, w);
+        this.needsUpdate = true;
+        return this.additionalQuaternion.clone();
+    }
+    /**
+     * 使用四元数模式设置矫正
+     * @param x 四元数的x值
+     * @param y 四元数的y值
+     * @param z 四元数的y值
+     * @param w 四元数的w值
+     */
+    setAdditionalRotationInQuaternion(x, y, z, w) {
+        const { THREE } = Externals.getInstance();
+        this.additionalQuaternion.set(x, y, z, w);
+        const { x: tx, y: ty, z: tz, w: tw, } = this.baseQuaternion.clone().multiply(this.additionalQuaternion);
+        this.quaternion.set(tx, ty, tz, tw);
+        this.needsUpdate = true;
+        return new THREE.Euler().setFromQuaternion(this.additionalQuaternion);
+    }
+    /**
+     * 配置全景图在不同view中的显示状态
+     * @param configuration 全景图配置
+     */
+    addViewConfiguration(configuration) {
+        const prevConfig = this.viewConfigurations.get(configuration.targetView);
+        const conf = Object.assign(Object.assign({}, prevConfig), configuration);
+        this.viewConfigurations.set(configuration.targetView, conf);
+        this.needsUpdate = true;
+        // /!!!#Async#
+        // if (applyImmediately === true) {
+        //   this.renderingViewChanged(configuration.targetView);
+        // }
+    }
+}
+export { Panorama };