@turbox3d/renderer-core
Version:
Large-scale declarative graphic ui core renderer
269 lines (268 loc) • 10.3 kB
TypeScript
import { CoordinateController, InteractiveConfig, InteractiveController, InteractiveType, SceneEvent, ViewEntity } from '@turbox3d/event-manager';
import { Vec2, Vec3 } from '@turbox3d/shared';
import { SceneTool, CommandManager } from '@turbox3d/command-manager';
import { Component, ComponentProps } from './component';
declare global {
interface Window {
$$turbox_hot: boolean;
}
}
interface IInteractiveControllerInfo<Container, DisplayObject, Renderer> {
[]: InteractiveController<Container, DisplayObject, Renderer>;
}
interface ICanvasInfo<Renderer> {
height: number;
width: number;
renderer: Renderer;
}
export interface ViewportInfo {
x: number;
y: number;
width: number;
height: number;
visible: boolean;
resolution?: number;
}
export declare enum SceneType {
Scene2D = "2d",
Scene3D = "3d"
}
export interface BaseSceneProps {
/**
* 用以标示当前场景的 ID
* 当多个不同 id 的场景关联到同一容器中时,可用于区分场景和隔离交互控制器
*/
id: string;
/**
* 用以标示当前场景的类型
*/
type?: symbol;
/**
* 画布容器标识
* 多个不同 id 的场景可关联同一个容器/渲染器上下文
*/
container: string;
/**
* 画布背景色,使用十六进制。默认:0xffffff
*/
backgroundColor?: number;
/**
* 画布背景图,优先级高于背景色
*/
backgroundImage?: string;
/**
* 画布背景透明度。默认:1
*/
backgroundAlpha?: number;
/**
* 画布是否可缩放。默认:true
*/
scalable?: boolean;
/**
* 画布是否可拖拽。默认:true
*/
draggable?: boolean;
/**
* 点击场景未选中任何目标的回调
*/
onClickNothing?: (event: SceneEvent) => void;
/**
* 处理本场景的 commandMgr
*/
commandMgr?: CommandManager;
/** 相机的初始位置 */
cameraPosition?: Vec3 | Vec2;
/** 坐标系类型 */
coordinateType?: 'top' | 'front' | 'left';
/** resizeTo 适配的 dom id 或元素引用 */
resizeTo?: string | Window;
/** 分辨率 */
resolution?: number;
/** 保留绘制缓存数据,用来截图 */
preserveDrawingBuffer?: boolean;
/** 颜色输出模式 renderer.outputColorSpace */
outputColorSpace?: string;
/** 最大帧率限制 */
maxFPS?: number;
/** 禁用 resize */
disableResize?: boolean;
/** 渲染标志(用来打开或关闭渲染 ticker,若为 false,则当前帧不渲染) */
renderFlag?: boolean;
/** 场景初始化完成的回调 */
initialized?: (sceneTool: SceneTool) => void;
/** 场景缩放系数限制([0.1, 2]) */
zoomRange?: number[];
}
export interface ViewInfo {
position: Vec2 | Vec3;
scale: Vec2 | Vec3;
visible: boolean;
width?: number;
height?: number;
}
export interface SceneContext {
getCommandManager: () => CommandManager | undefined;
getSceneTools: () => SceneTool;
}
export declare abstract class BaseScene<ApplicationContext, Renderer, Scene, Camera, Raycaster, Container, DisplayObject, Viewport> extends Component<BaseSceneProps> {
/** 默认背景色 */
static BACKGROUND_COLOR: number;
/** 默认背景透明度 */
static BACKGROUND_ALPHA: number;
/** 默认画布宽度 */
static DEFAULT_WIDTH: number;
/** 默认画布高度 */
static DEFAULT_HEIGHT: number;
static SCALE_BIGGER: number;
static SCALE_SMALLER: number;
/** 挂载点与应用上下文的映射关系 */
static appMap: Map<string, any>;
/** 应用上下文与不同视角交互控制器的映射关系 */
static interactiveMap: Map<any, IInteractiveControllerInfo<any, any, any>>;
/** 应用上下文是否已经挂载的状态 */
static appMountedStatus: Map<string, boolean>;
/** 模型实际容器 */
view: Container;
/** 默认的场景视图类型标识 */
abstract defaultSceneViewType: symbol;
/** 模型视口容器(有多视图的时候才有) */
viewport?: Viewport;
/** 场景类型,标识是 2d 还是 3d 场景 */
abstract sceneType: SceneType;
/** 场景实例,仅 3d 下有 */
scene?: Scene;
/** 相机实例,仅 3d 下有 */
camera?: Camera;
/** 射线实例,仅 3d 下有 */
raycaster?: Raycaster;
tickers: Array<(deltaTime: number) => void>;
width: number;
height: number;
coordinate: CoordinateController;
mountTimer: number;
sceneContext: SceneContext;
resolution: number;
backgroundImage: DisplayObject;
maxFPS: number;
renderFlag: boolean;
constructor(props: Exclude<ComponentProps<BaseSceneProps>, ViewEntity>);
componentDidMount(): void;
componentDidUpdate(): void;
/**
* 卸载画布的钩子(主要做一些清理回收工作,浏览器环境下无需另外实现)
*/
abstract unmountCanvas(): void;
componentWillUnmount(): void;
/** 移除应用子视图 */
abstract removeAppChildrenView(app: ApplicationContext): void;
/** 销毁 gl app 及相关清理工作的实现 */
abstract destroyApp(app: ApplicationContext): void;
/** 创建 gl app instance,并返回 */
abstract createApp(): ApplicationContext;
/** 创建根视图,给 view 设值 */
abstract createView(): Container;
/** 获取根视图的基本信息(position、scale、visible) */
abstract getViewInfo(): ViewInfo;
/** 添加子视图的接口 */
abstract addChildView(view: DisplayObject): void;
/** 关闭渲染器的默认交互 */
abstract destroyRendererInteraction(app: ApplicationContext): void;
abstract getCanvasView(app: ApplicationContext): ICanvasInfo<Renderer>;
/** 获取 hitTarget 的原始实现方法 */
abstract getHitTargetOriginal(): (point: Vec2, container: Container, configMap: Map<DisplayObject, InteractiveConfig>, interactiveType: InteractiveType) => {
/** event 的直接对象 */
originalTarget?: DisplayObject;
/** originalTarget 或 originalTarget 的祖先中的第一个可被交互的元素 */
target?: DisplayObject;
/** 选中对象的具体场景鼠标位置 */
originalTargetPoint?: Vec2 | Vec3;
};
/** 更新分辨率 */
abstract updateResolution(app: ApplicationContext): void;
private initInteractiveController;
/** 更新渲染状态 */
private updateRenderFlag;
private getCoordinateCtrl;
private getViewEntity;
getCurrentInteractiveController: () => InteractiveController<any, any, any> | undefined;
getCurrentApp: () => ApplicationContext | undefined;
private updateCursorHandler;
abstract updateCursor(app: ApplicationContext, cursor: string): void;
private getSceneTools;
/**
* 坐标转化
*/
private coordinateTransform;
/**
* 将渲染器/画布挂载到视图布局上(浏览器环境下无需另外实现)
*/
abstract mountCanvas(renderer: Renderer): void;
private loadCanvas;
private updateCameraInfo;
/** 更新相机位置 */
abstract updateCameraPosition(position: Vec3): void;
private resizeHandler;
/** 初始化坐标系控制系统 */
abstract createCoordinateController(app: ApplicationContext): CoordinateController;
private resizeStageByCanvas;
/** 初始化天空盒 */
abstract initSkyBox(app: ApplicationContext): void;
/**
* resize 场景大小
*/
abstract resizeStage(app: ApplicationContext): void;
/** 设置背景图 */
abstract setBackGroundImage(app: ApplicationContext): void;
/**
* 计算2d原始视图的缩放和位置
*/
private compute2dOriginView;
/** 计算视口的缩放和位置、可见性 */
private computeViewport;
/** resize 视口 */
abstract resizeViewport(app: ApplicationContext): void;
/** 设置根视图的位置 */
abstract setViewPosition(position: Partial<Vec3>): void;
/** 设置根视图的缩放 */
abstract setViewScale(scale: Partial<Vec3>): void;
/** 设置根视图是否可见 */
abstract setViewVisible(visible: boolean): void;
/** 添加根视图容器到 app stage 的实现 */
abstract addRootViewContainer(app: ApplicationContext): void;
onClick: (event: SceneEvent) => void;
onDBClick: (event: SceneEvent) => void;
onRightClick: (event: SceneEvent) => void;
onDragStart: (event: SceneEvent) => void;
onDragMove: (event: SceneEvent) => void;
onDragEnd: (event: SceneEvent) => void;
onPinchStart: (event: SceneEvent) => void;
onPinch: (event: SceneEvent) => void;
onPinchEnd: (event: SceneEvent) => void;
onRotateStart: (event: SceneEvent) => void;
onRotate: (event: SceneEvent) => void;
onRotateEnd: (event: SceneEvent) => void;
onPress: (event: SceneEvent) => void;
onPressUp: (event: SceneEvent) => void;
onPointerMove: (event: SceneEvent) => void;
onPointerUp: (event: SceneEvent) => void;
onWheel: (event: SceneEvent) => void;
/** 画布拖拽功能的实现,注意:如果已经引入其他交互插件则无需重复实现,避免实现上的冲突 */
abstract canvasDragImpl(event: SceneEvent, type: 'start' | 'move' | 'end'): void;
/** 画布缩放功能的实现,注意:如果已经引入其他交互插件则无需重复实现,避免实现上的冲突 */
abstract canvasScaleImpl(event: SceneEvent): void;
/** 获取视口的实现 */
abstract getViewport(): Viewport | undefined;
/** 获取视口基础信息的实现 */
abstract getViewportInfo(): ViewInfo | undefined;
/** 初始化视口,给 viewport 设值 */
abstract createViewport(): void;
/** 设置视口的位置 */
abstract setViewportPosition(position: Partial<Vec3>): void;
/** 设置视口的缩放 */
abstract setViewportScale(scale: Partial<Vec3>): void;
/** 设置视口是否可见 */
abstract setViewportVisible(visible: boolean): void;
/** 获取截图 */
abstract getScreenShot(sx?: number, sy?: number, w?: number, h?: number, fileType?: string, quality?: number, isBase64?: boolean): Promise<string | Blob>;
}
export {};