panoramic-view/dist/index.d.ts

基于ThreeJS构建的全景图查看器。

import { Instance } from 'tippy.js';
import * as THREE from 'three';

declare class AbstractToolbar extends HTMLElement {
    template: string;
    panoramic: PanoramicView;
    constructor();
    connectedCallback(): void;
    protected registerClickListener(): void;
    onClick(): void;
    onCreate(panoramic: PanoramicView): void;
}

export declare interface Custom {
    id?: string;
    className?: string;
    icon?: string;
    html?: string;
    tip?: string;
    onClick?: (panoramic: PanoramicView) => void;
}

declare interface FileList_2 {
    name: string;
    /** 关键字，可以是漫游点为ID */
    key?: string;
    url: string;
    type?: 'image' | 'video';
    /**
     * 修改相机视野角度，可以单独为pc和手机设置不同值
     */
    fov?: {
        pc: number;
        phone: number;
    };
    /** 全景热点，video不生效，如果没有跳转点，那么就将相机移动到该点位，否则跳转漫游 */
    hotspot?: {
        position: {
            x: number;
            y: number;
            z: number;
        };
        /** 点位图标url */
        icon: string;
        /** 跳转漫游点 可以是file的key也可以是name */
        jumpTo?: string;
    }[];
}
export { FileList_2 as FileList }

declare class FileListBox extends HTMLElement {
    panoramic: PanoramicView;
    constructor(panoramic: PanoramicView);
    connectedCallback(): void;
}

/**
 * 判断图片是否为全景图片
 * @param url
 */
export declare const isPanoramic: (url: string) => Promise<boolean>;

declare class Loading extends HTMLElement {
    constructor();
    connectedCallback(): void;
}

declare interface LoadTexture {
    all: number;
    loading: {
        id: number;
        name?: string;
    };
    leftOver: number;
}

export declare class PanoramicView {
    options: PanoramicViewOptions;
    /**
     * t-panoramic全景dom
     */
    container: HTMLDivElement;
    loadTextureLoaderIndex: number;
    texture: THREE.Texture[];
    loadTextureMsg: LoadTexture;
    scene: THREE.Scene;
    mesh: THREE.Mesh;
    camera: THREE.PerspectiveCamera;
    renderer: THREE.WebGLRenderer;
    /**
     * @description 镜头角度
     */
    anglexoz: number;
    rotateAnimateTimer: any;
    /**
     * @description 手机端多点触控 用来开闭鼠标控制支持的，如果用户在进行放大手势，应该将鼠标视角控制锁定
     */
    mouseFovControllerSport: boolean;
    rotateAnimateController?: boolean;
    hotspotAnimate: number;
    /**
     * 调试
     */
    debug: boolean;
    toolbar: Toolbar;
    loading: Loading;
    fileListBox: FileListBox;
    tipInstance: Instance;
    constructor(options: PanoramicViewOptions);
    /**
     * 初始化语言-国际化
     * @private
     */
    private initialize;
    /**
     * 初始化组件
     * @private
     */
    private initPanoramic;
    private initFileList;
    /**
     * 关闭旋转动画
     */
    closeRateAnimate(): void;
    /**
     * 自转动画
     */
    autoAnimate(): void;
    private loadAnimate;
    private closeLoadAnimate;
    private rotateAnimate;
    private animate;
    private phoneController;
    private wardKeydown;
    private debugTip;
    private mouseController;
    render(): void;
    private loadTextureLoader;
    private loadTextureLoaderEnd;
    switchPhotoN(index: number): {
        status: string;
        msg: string;
    };
    private switchGo;
    private handleIcon;
    hotspotSettings(hotspots: FileList_2['hotspot']): void;
    clearHotspot(): void;
    isPhone(): boolean;
    getOptions(): PanoramicViewOptions;
    destroy(): void;
    /**
     * 宽高重设
     * @param width 宽度
     * @param height 高度
     */
    resizeRendererToDisplaySize(width: number, height: number): void;
    changeLocal(lang: PanoramicViewOptions['lang']): this;
}

export declare interface PanoramicViewOptions {
    container: Element | string;
    /**
     * @description 体感控制开关，true表示打开，false表示关闭
     * @defaultValue false
     */
    deviceOrientationControls?: boolean;
    /**
     * 鼠标控制
     */
    mouseController?: boolean;
    /**
     * @description 镜头自动旋转
     */
    rotateAnimateController?: boolean;
    /**
     * 文件列表
     */
    fileList: FileList_2[];
    /**
     * @description 语言
     * @default zh
     */
    lang?: string | 'zh' | 'en';
    /**
     * @description 国际化
     */
    i18n?: Record<string, Record<string, string>>;
    /**
     * 工具栏
     */
    toolbarKeys?: (string | Custom)[];
    /**
     * 工具栏排除
     */
    toolbarExcludeKeys?: string[];
    /**
     * 加载中事件
     */
    onLoad?: (e: LoadTexture) => void;
    /**
     * dom构建完成
     * @param opts
     */
    onCreated?: (opts: PanoramicView) => void;
    /**
     * 图片切换事件
     */
    switchLoad?: (e: SwitchTexture) => void;
}

declare interface SwitchTexture {
    loading: {
        id: number;
        name?: string;
    };
    status: 'end' | 'loading' | string;
}

declare class Toolbar extends HTMLElement {
    toolbar: AbstractToolbar[];
    constructor();
    connectedCallback(): void;
    onCreate(panoramic: PanoramicView): void;
    initToolbarKeys(panoramic: PanoramicView, toolbarKeys: (string | Custom)[]): void;
}

export { }