xl-pano/lib/interface/BaseScene.d.ts

一个基于 Typescript 的，同时支持立方体和球体场景的轻量开源库。

import Pano from "../Pano";
import Scene, { SceneAngle, SceneAngleChangeCallback, SceneListenerType, VoidFunction } from "./Scene";
import HotSpot from "../HotSpot";
import { TextureSource } from "../../types/index";
/**
 * 场景变化的动画参数
 * @param {boolean} animation 是否执行动画
 * @param {number} duration 动画执行时间
 * @param {VoidFunction} callback 执行完动画后的回调函数
 * */
interface AnimationOptions {
    animation?: boolean;
    duration?: number;
    callback?: VoidFunction;
}
export default class BaseScene implements Scene {
    /**
     * @property {number} pitch 俯仰角-绕 x 轴旋转角度
     * */
    pitch: number;
    /**
     * @property {number} yaw 偏航角-绕 y 轴旋转角度
     * */
    yaw: number;
    /**
     * 视点参数
     * position: 视点位置
     * target: 视线方向
     * up: 上方向
     * */
    eye: {
        position: {
            x: number;
            y: number;
            z: number;
        };
        target: {
            x: number;
            y: number;
            z: number;
        };
        up: {
            x: number;
            y: number;
            z: number;
        };
    };
    /**
     * @property {[number, number]} yRange 俯仰可视范围角度
     * */
    yRange: number[];
    /**
     * @property {number} fovy 静态可视范围角度
     * */
    fovy: number;
    /**
     * @property {boolean} dragging 是否正在被拖拽
     * 鼠标按下置为 true；鼠标释放置为 false
     * */
    dragging: boolean;
    /**
     * @property {{x: number, y: number}} dragStartPoint 开始拖拽的起点
     * */
    dragStartPoint: {
        x: number;
        y: number;
    };
    /**
     * @property {boolean} angling 是否正在进行转动
     * */
    angling: boolean;
    /**
     * @property {boolean} fovying 是否正在进行移动（fovy 切换）
     * */
    fovying: boolean;
    /**
     * 获取 pitch 可移动范围
     * */
    getPitchRange(): number[];
    /**
     * @property {Pano} pano 父容器Pano
     * */
    pano: Pano;
    /**
     * 计算 mvp 矩阵，并传递到着色器中变量
     * */
    setMvpMatrix(): void;
    /**
     * 角度变化回调函数集合
     * */
    angleChangeCallbacks: SceneAngleChangeCallback[];
    /**
     * @property {HotSpot[]} hotSpots 热点
     * */
    hotSpots: HotSpot[];
    /**
     * 添加回调函数
     * @param type {SceneListenerType} 事件类型，预定义好的
     * @param  callback {SceneAngleChangeCallback} 回调函数
     * */
    addListener(type: SceneListenerType, callback: SceneAngleChangeCallback): void;
    /**
     * 移除监听
     * @param type {SceneListenerType} 事件类型，预定义好的
     * @param  callback {SceneAngleChangeCallback} 回调函数
     * */
    removeListener(type: SceneListenerType, callback: SceneAngleChangeCallback): void;
    /**
     * 移除所有监听
     * */
    removeAllListeners(): void;
    /**
     * 销毁
     * */
    destroy(): void;
    /**
     * 获取当前角度
     * @return {SceneAngle} 俯仰角/偏航角
     * */
    getAngle(): SceneAngle;
    /**
     * 获取视角范围
     * @return {number} 视角范围
     * */
    getFovy(): number;
    /**
     * 渲染热点
     * @param {number} deltaPitch 俯仰角偏移量
     * @param {number} deltaYaw 偏航角偏移量
     * */
    renderHotSpots(deltaPitch?: number, deltaYaw?: number): void;
    /**
     * 执行角度变化后的回调函数
     * */
    executeAngleChangeCallbacks(): void;
    /**
     * 绘制前的准备工作
     * 1. 确定最终角度，包括超出范围后的计算
     * 2. 设置 mvp 矩阵
     * */
    beforeDrawElements(deltaPitch?: number, deltaYaw?: number): void;
    /**
     * 添加热点
     * @param {HotSpot | HotSpot[]} hotSpots 待添加的热点
     * */
    addHotSpots(hotSpots: HotSpot | HotSpot[]): void;
    /**
     * 绘制变换后的场景和热点
     * @param deltaPitch {number} 场景的俯仰角偏移值
     * @param deltaYaw {number} 场景的偏航角偏移值
     * */
    draw(deltaPitch?: number, deltaYaw?: number): void;
    /**
     * 场景移动到某一点
     * @param {number} targetX 移动目标点的X坐标
     * @param {number} targetY 移动目标点的X坐标
     * */
    moveTo(targetX: number, targetY: number): void;
    /**
     * 移动角度偏移量
     * @param deltaPitch {number} 俯仰角偏移量
     * @param deltaYaw {number} 偏航角偏移量
     * @param options {AnimationOptions} 可选动画参数
     * */
    move(deltaPitch: number, deltaYaw: number, options?: AnimationOptions): void;
    /**
     * 设置到某个角度
     * @param angle {SceneAngle} 目标角度值
     * @param options {AnimationOptions} 可选动画参数
     * */
    setAngle(angle: SceneAngle, options?: AnimationOptions): void;
    /**
     * 设置到视角
     * @param fovy {number} 目标视角
     * @param options {AnimationOptions} 可选动画参数
     * */
    setFovy(fovy: number, options?: AnimationOptions): void;
    /**
     * 点击热点回调，执行切换场景前的动画
     * @param {HotSpot} hotSpot 目标热点
     * */
    onHotSpotClick(hotSpot: HotSpot): void;
    /**
     * PC端和移动端的移动事件绑定
     * */
    eventBind(): void;
    /**
     * @property {TextureSource[] | TextureSource} textures 纹理资源：在各个子类中重写
     * */
    textures: TextureSource[] | TextureSource;
    /**
     * 渲染模型：在各个子类中重写
     * */
    drawModel(): void;
    /**
     * 渲染模型：在各个子类中重写
     * @param textures {TextureSource[] | TextureSource} 替换后的纹理资源
     * */
    replaceTextures(textures: TextureSource[] | TextureSource): void;
    /**
     * 渲染到 pano：在各个子类中重写
     * @param {Pano} pano 父容器
     * */
    render(pano: Pano): void;
}
export {};