@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/element/tile-panorama.d.ts

@@ -0,0 +1,161 @@
+import { NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { View } from '../view';
+import { TilePlane } from './tile-plane';
+import { TileTextureInfo } from '../utils/tile-util';
+interface TilePanoramaViewConfiguration {
+    targetView: View;
+    showBorder?: boolean;
+    showSkyBox?: boolean;
+}
+/**
+ * 全景图对象
+ * @noInheritDoc
+ */
+declare class TilePanorama extends Element {
+    private initialized;
+    private needsUpdate;
+    private level;
+    /** @ignore */
+    levelMax: number;
+    private sphereMesh;
+    private isPlayingVideo;
+    private video;
+    private wireFrame;
+    /** @ignore */
+    tilePlanes: TilePlane[];
+    pid: number;
+    /** @ignore */
+    seqID: number;
+    /** @ignore */
+    neighborPanoramaIDs: number[];
+    /** @ignore */
+    highTextureURLs: string[];
+    /** @ignore */
+    textureURLs: string[];
+    /** @ignore */
+    offLinTextureUrls: string[];
+    /** @ignore */
+    offLineTextureLevel: number;
+    /** @ignore */
+    useLowTextureURLsOnly: boolean;
+    /** @ignore */
+    tiledTextureURLRoot: string | undefined;
+    private baseQuaternion;
+    private additionalQuaternion;
+    private panoramaLoaded;
+    private eventListeners;
+    private isSelected;
+    private videoCanvas;
+    private mpegVideoPlayer;
+    private videoContentType;
+    private mounted;
+    /**
+     * @param textureURLs 低清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param highTextureURLs 高清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param useLowTextureURLsOnly 可选，设置后则（如果没有提供瓦片贴图）只使用低清立方体贴图
+     * @param tiledTextureURLRoot 可选，瓦片贴图URL的前缀部分，若没有则用highTextureURLs和lowTextureURLs作为贴图源
+     */
+    constructor(pid: number, seqID: number, textureURLs: string[], neighborPanoramaIDs: number[], levelMax: number, offLinTextureUrls?: string[], offLineTextureLevel?: number, position?: NS_THREE.Vector3, quaternion?: NS_THREE.Quaternion);
+    /**
+     * 关联包围框
+     * @param size
+     */
+    private linkLineBox;
+    /**
+     * 关联球
+     * @returns
+     */
+    private linkShere;
+    /**
+     * 挂载
+     * @ignore
+     */
+    mount(): void;
+    /**
+     * 卸载
+     */
+    unMount(): void;
+    /**
+     * 更新等级
+     * @param level
+     */
+    updateLevel(level: number): void;
+    /**
+     * 获取预处理纹理信息
+     * @returns
+     */
+    getPreTextureInfos(): TileTextureInfo[];
+    /**
+     * 设置位移
+     * @param position
+     * @param quaternion
+     */
+    private setTransform;
+    /**
+     * 暂停视频播放
+     */
+    pauseVideo(): void;
+    /**
+     * 恢复视频播放
+     */
+    resumeVideo(): Promise<void>;
+    /**
+     * 停止视频播放，并释放视频相关资源
+     */
+    stopVideo(): void;
+    /**
+     * 开始视频播放
+     * @param videoURL 视频地址
+     * @param loop 是否循环播放
+     * @param callbacks 回调函数集合，可选
+     */
+    playVideo(videoURL: string, loop: boolean, callbacks?: {
+        onPrepareToPlay?: (video?: HTMLVideoElement) => void;
+        onReadyToPlay?: (video?: HTMLVideoElement) => void;
+        onEnded?: (video?: HTMLVideoElement) => void;
+    }, contentType?: 'mp4' | 'ts', canvasSize?: [number, number]): HTMLVideoElement | null;
+    /**
+     * 设置是否只使用低分辨率贴图
+     * @param useLowTexturesOnly 是否只使用低分辨率贴图
+     */
+    setUseLowTexturesOnly(useLowTexturesOnly: boolean): void;
+    /**
+     * 是否使用地分辨率贴图
+     * @returns
+     */
+    isUseLowTexturesOnly(): boolean;
+    /**
+     * 清理
+     */
+    dispose(): void;
+    /**
+     * @ignore
+     */
+    update(): ElementFrameContext;
+    /**
+     * 使用欧拉角模式设置矫正
+     * @param roll 横滚角, 坐标轴为x
+     * @param pitch 俯仰角, 坐标轴为y
+     * @param yaw 偏航角, 坐标轴为z
+     */
+    setAdditionalRotationInEuler(roll: number, pitch: number, yaw: number): NS_THREE.Quaternion;
+    /**
+     * 使用四元数模式设置矫正
+     * @param x 四元数的x值
+     * @param y 四元数的y值
+     * @param z 四元数的y值
+     * @param w 四元数的w值
+     */
+    setAdditionalRotationInQuaternion(x: number, y: number, z: number, w: number): NS_THREE.Euler;
+    /**
+     * 获取盒子
+     * @ignore
+     * @returns
+     */
+    getBox(): {
+        size: number;
+        matrix: NS_THREE.Matrix4;
+    };
+}
+export { TilePanorama, TilePanoramaViewConfiguration };

package/lib/owlly/element/tile-panorama.js

@@ -0,0 +1,509 @@
+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 { DeviceUtils } from '../utils/device-utils';
+import { TilePlaneUtil } from './tile-plane';
+import { CubeFaceConfig, TileTextureInfo, TileUtil } from '../utils/tile-util';
+let sphereInstance;
+const TILE_PANORAMA_SIZE = 2;
+/**
+ * 全景图对象
+ * @noInheritDoc
+ */
+class TilePanorama extends Element {
+    /**
+     * @param textureURLs 低清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param highTextureURLs 高清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+     * @param useLowTextureURLsOnly 可选，设置后则（如果没有提供瓦片贴图）只使用低清立方体贴图
+     * @param tiledTextureURLRoot 可选，瓦片贴图URL的前缀部分，若没有则用highTextureURLs和lowTextureURLs作为贴图源
+     */
+    constructor(pid, seqID, textureURLs, neighborPanoramaIDs = [], levelMax, offLinTextureUrls, offLineTextureLevel, position, quaternion) {
+        super();
+        this.level = 0;
+        /** @ignore */
+        this.levelMax = 0;
+        /** @ignore */
+        this.offLineTextureLevel = -1;
+        this.pid = pid;
+        this.seqID = seqID;
+        this.textureURLs = textureURLs;
+        this.levelMax = levelMax;
+        this.neighborPanoramaIDs = neighborPanoramaIDs;
+        this.offLinTextureUrls = offLinTextureUrls || [];
+        if (offLineTextureLevel != null) {
+            this.offLineTextureLevel = offLineTextureLevel;
+        }
+        this.initialized = false;
+        this.mounted = false;
+        this.needsUpdate = false;
+        this.tilePlanes = [];
+        this.isPlayingVideo = false;
+        this.videoCanvas = null;
+        this.videoContentType = 'mp4';
+        this.setTransform(position, quaternion);
+    }
+    /**
+     * 关联包围框
+     * @param size
+     */
+    linkLineBox(size) {
+        const { THREE } = Externals.getInstance();
+        const boxGeometry = new THREE.BoxBufferGeometry(size, size, size);
+        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);
+    }
+    /**
+     * 关联球
+     * @returns
+     */
+    linkShere() {
+        const { THREE } = Externals.getInstance();
+        if (!sphereInstance) {
+            const sphereGeometry = new THREE.SphereBufferGeometry(1, 60, 40);
+            sphereGeometry.scale(1, -1, 1);
+            sphereGeometry.rotateY(-90 * Math.PI / 180.0);
+            sphereInstance = new THREE.Mesh(sphereGeometry);
+            sphereInstance.visible = false;
+            sphereInstance.renderOrder = 150;
+        }
+        else {
+            // sphereInstance.matrix.identity();
+        }
+        // sphereInstance.applyMatrix4(matrix);
+        return sphereInstance;
+    }
+    /**
+     * 挂载
+     * @ignore
+     */
+    mount() {
+        TilePlaneUtil.setPlanesVisible(true);
+        this.tilePlanes = TilePlaneUtil.getPlanesByMatrix(this.pid, this.level, this.textureURLs, this.offLineTextureLevel, this.offLinTextureUrls);
+        this.tilePlanes.forEach((plane) => {
+            this.add(plane);
+            plane.visible = true;
+            // plane.renderOnce();
+        });
+        this.sphereMesh = this.linkShere();
+        this.linkLineBox(TILE_PANORAMA_SIZE);
+        this.add(this.sphereMesh);
+        this.mounted = true;
+        this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+    }
+    /**
+     * 卸载
+     */
+    unMount() {
+        TilePlaneUtil.setPlanesVisible(false);
+        this.tilePlanes.forEach((plane) => {
+            // plane.visible = false;
+            this.remove(plane);
+        });
+        this.tilePlanes = [];
+        if (this.sphereMesh) {
+            this.remove();
+            this.sphereMesh = null;
+        }
+        this.mounted = false;
+    }
+    /**
+     * 更新等级
+     * @param level
+     */
+    updateLevel(level) {
+        const tLevel = Math.min(level, this.levelMax);
+        if (this.level !== tLevel) {
+            this.level = tLevel;
+            if (this.tilePlanes) {
+                this.tilePlanes.forEach((plane) => {
+                    plane.level = tLevel;
+                });
+            }
+        }
+    }
+    /**
+     * 获取预处理纹理信息
+     * @returns
+     */
+    getPreTextureInfos() {
+        const ref = [];
+        CubeFaceConfig.forEach((config, index) => {
+            const { face, } = config;
+            const { level, textureURLs, offLineTextureLevel, offLinTextureUrls, } = this;
+            const pPid = this.pid + (face + 1) / 10;
+            const count = TileUtil.getCount(this.level);
+            for (let i = 0; i < count; i++) {
+                const info = new TileTextureInfo(pPid, 0, level, i, textureURLs[index], offLineTextureLevel, offLinTextureUrls[index]);
+                if (level === 0) {
+                    info.frize = true;
+                }
+                ref.push(info);
+            }
+        });
+        return ref;
+    }
+    /**
+     * 设置位移
+     * @param position
+     * @param quaternion
+     */
+    setTransform(position, quaternion) {
+        if (position) {
+            this.position.copy(position);
+        }
+        if (quaternion) {
+            this.quaternion.copy(quaternion);
+        }
+        const { THREE } = Externals.getInstance();
+        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 立方体贴图对象
+    //  */
+    // public setTexture(): void {
+    //   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() {
+        if (!this.sphereMesh) {
+            return;
+        }
+        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]) {
+        if (!this.sphereMesh) {
+            return null;
+        }
+        const { THREE } = Externals.getInstance();
+        const { onReadyToPlay, onEnded, onPrepareToPlay } = callbacks || {};
+        this.videoContentType = contentType;
+        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: () => {
+                    if (this.sphereMesh) {
+                        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);
+                if (this.sphereMesh) {
+                    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;
+    }
+    /**
+     * 设置是否只使用低分辨率贴图
+     * @param useLowTexturesOnly 是否只使用低分辨率贴图
+     */
+    setUseLowTexturesOnly(useLowTexturesOnly) {
+        this.useLowTextureURLsOnly = useLowTexturesOnly;
+    }
+    /**
+     * 是否使用地分辨率贴图
+     * @returns
+     */
+    isUseLowTexturesOnly() {
+        return this.useLowTextureURLsOnly;
+    }
+    /**
+     * 清理
+     */
+    dispose() {
+        super.dispose();
+        if (this.mounted) {
+            this.unMount();
+        }
+        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.sphereMesh
+                && 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);
+    }
+    // /**
+    //  * @ignore
+    //  * @param view
+    //  * @returns
+    //  */
+    // public renderingViewChanged(view: View): void {
+    //   if (!view.camera) return;
+    //   super.renderingViewChanged(view);
+    //   this.tilePlanes.forEach((tilePlane) => {
+    //     tilePlane.renderingViewChanged(view);
+    //   });
+    // }
+    /**
+     * 获取盒子
+     * @ignore
+     * @returns
+     */
+    getBox() {
+        return { size: 2, matrix: this.matrix };
+    }
+}
+export { TilePanorama };