类型
WebglConfig
Webgl
引擎配置参数
interface WebglConfig {
// 模型解压所需的资源文件路径,默认值:/dt-engine/draco/(需确保对应的路径下有资源)
decoderPath: string;
// 模型库文件路径,默认值:/
modelPath: string;
// 配置缓存
cache: {
// 是否开启缓存,默认值:true
enable: boolean;
// 缓存过期时间(毫秒),默认值:12 * 60 * 60 * 1000
expires: number;
};
//注: 直接缓存场景,可能导致模型搭建工具更新场景后,客户端渲染出来的场景未更新
scene: {
// 检测是否缓存已经编译后的场景
cache: ((url: string) => boolean) | boolean;
expires: number;
cacheType: SceneCacheType;
}; // [v4.1.6]
// 加密信息
encrypt: DecryptOptions;
performance: {
autoMerge: boolean;
silent: boolean;
mergeTypes: ComponentType[];
};
// 风格配置
themes: {
// 相机配置
camera: CameraOptions;
// 渲染器配置
render: WebGLRendererParameters;
// 轨道控制器配置
orbitControls: Record<string, any>;
hover: {
color: string;
opacity: number;
};
selected: {
// 模型选中时的颜色
color: string;
// 模型选中时颜色的透明度
opacity: number;
};
};
// 默认启用的插件
plugins: PluginCreator<unknown, WebglCreator>[];
// 场景模型渲染拦截器,可用于剔除场景中的某些模型,达到精简场景提高性能的目的,也可以用于在渲染模型前对模型的配置信息进行修改
interceptor: RenderInterceptor<WebglModel>; // [v4.1.5]
}
enum SceneCacheType {
enter = "enter",
leave = "leave"
}
CameraOptions
相机的配置参数
type CameraOptions = {
fov?: number; // 相机视锥体垂直视野角度
aspect?: number; // 相机视锥体长宽比
near?: number; // 相机视锥体近端面
far?: number; // 相机视锥体远端面
position?: DTVector3; // 相机的坐标
target?: DTVector3; // 相机看向的位置
autoAdjust?: boolean; // 是否自动调整位置
};
- 参考: DTVector3
Options
component
配置参数
interface Options {
type: ComponentType; // 模型类型
name: string; // 名称
realType: string; // 物模型ID or 数字空间模板ID
realId: string | undefined; // 设备ID or 空间code
modelId: string; // 三维模型ID
parentId?: string | undefined; // 三维模型父级ID
children?: Array<Options>; // 三维模型子节点
url?: string | undefined; // 模型远程URL地址
exists?: boolean; // 模型是否已经存在与父组件中,默认已经存在
mappingUrl?: string | undefined;
props?: {
type?: string; // 模型类型
tags?: string[]; // 模型标签
// 可选属性
position?: number[]; // 三维模型位置
rotation?: number[]; // 三维模型旋转角度
scale?: number[]; // 三维模型缩放
isCustom?: boolean; // 是否是自定义的元素
} & Record<string, any>;
extension?: {
// 扩展字段
sync?: boolean; // 是否同步渲染当前节点
preload?: boolean; // 是否自动预加载
} & Record<string, any>;
}
RenderFn
渲染器渲染中回调函数
type RenderFn = (time: number) => void;
ResizeFn
渲染器重设宽高回调函数
type ResizeFn = (
width: number, // 渲染器宽度
height: number // 渲染器高度
) => void;
CameraPosition
相机通用坐标格式
type CameraPosition = DTVector3 | Component<DTModel> | DTModel;
ZoomOptions
相机缩放配置参数
type ZoomOptions = {
zoom: number; // 缩放大小
duration?: number; // 动画持续时间,默认1000
easing?: (amount: number) => number; // 缓冲动画函数,默认Quartic.InOut
};
FlyToOptions
相机飞行配置参数
type FlyToOptions = {
easing?: (amount: number) => number; // 缓冲动画函数,默认Quartic.InOut
autoAdjust?: boolean; // 自动调整位置【没有传position、phi/theta时,该参数才生效】
duration?: number; // 飞行动画持续时长,默认3000
distance?: number; // 相机到目标的距离,默认3【没有传position时,该参数才生效】
lookAt?: CameraPosition; // 相机看向的目标位置
position?: DTVector3; // 相机飞到的目标位置
phi?: number; // 俯仰角。传了该参数,theta默认180【没有传position时,该参数才生效】
theta?: number; // 水平角。传了该参数,phi默认0【没有传position时,该参数才生效】
route?: "none" | "spherical"; // [v4.1.4] none: 直接往点飞去 Spherical: 沿着球面飞过去
};
- 参考: CameraPosition; DTVector3
TravelOptions
相机旅行配置参数
type TravelOptions = {
easing?: (amount: number) => number; // 缓冲动画函数,默认Quartic.InOut
delay?: number; // 相机在每个点的停留时长【传了duration时,该参数才生效】
mode?: "reverse" | "loop"; // 往返 或 循环 模式
duration?: number; // 相机在每个点之间移动的动画时长
speed?: number; // 相机在每个点之间移动的速度【没有传duration时,该参数才生效】
autoAdjust?: boolean; // 自动调整相机位置【没有传phi/theta时,该参数才生效】
distance?: number; // 相机到目标的距离
phi?: number; // 俯仰角。传了该参数,theta默认为180
theta?: number; // 水平角。传了该参数,phi默认为0
route?: "none" | "spherical"; // [v4.1.4] none: 直接往点飞去 Spherical: 沿着球面飞过去
process?: (index: number) => void; // 过程回调函数,相机每移动完一步,就会执行一次该回调
};
MoveOptions
相机移动配置参数
type MoveOptions = {
duration?: number; // 每段距离运行的时长,默认为800
speed?: number; // 运动的速度【没有传duration时,该参数才生效】
easing?: (amount: number) => number; // 运动曲线,默认为Linear.None
mode?: "loop" | "reverse"; // 运行模式;loop: 循环;reverse: 往返
process?: (index: number) => void; // 过程回调函数,相机每移动完一步,就会执行一次该回调
};
FollowOptions
相机跟随配置参数
type FollowOptions = {
relative: DTVector3; //
phi: number; // 俯仰角
theta: number; // 水平角
};
FaceToOptions
相机朝向配置参数
type FaceToOptions = {
duration?: number; // 动画持续时长,默认800
zoom?: number; // 相机缩放级别,默认为当前相机的缩放级别
easing?: (amount: number) => number; // 缓冲动画函数,默认为Linear.None
};
AdjustOptions
相机位置自动调节配置参数
type AdjustOptions = {
distance?: number; // 按照指定的比例缩放相机到目标的距离,默认值为:1
phi?: number; // 俯仰角
theta?: number; // 水平角
duration?: number; // [v4.0.0] 动画持续时长
route?: "none" | "spherical"; // [v4.0.0] none: 按照直线路径移动,spherical:按照球面路径移动
};
BaseAnimation
基础动画类
abstract class BaseAnimation extends EventEmitter {
uuid: string;
type = "animation";
constructor() {
super();
this.uuid = createUUid();
let update = (time: number) => this.update(time);
let remove = () => {
removeRender(update);
};
this.addEventListener(AnimationEventType.stop, remove);
this.addEventListener(AnimationEventType.complete, remove);
this.addEventListener(AnimationEventType.pause, remove);
this.addEventListener(AnimationEventType.start, () => {
onRender(update);
});
}
poor = false;
/**
* 开始
*/
abstract start(): this;
/**
* 暂停
*/
abstract pause(): this;
/**
* 继续
*/
abstract resume(): this;
/**
* 停止
*/
abstract stop(): this;
/**
* 推进动画
* @param time
*/
abstract update(time: number): this;
}
AnimationActions
动画控制对象
type AnimationActions = {
clear: () => void;
insert: (point: CameraPosition[], index?: number) => void;
remove: (index: number, count?: number) => void;
continue: () => void;
pause: () => void;
stop: () => void;
};
- 参考: CameraPosition
DTVector3
SDK 基础三维坐标
type DTVector3 = {
x: number;
y: number;
z: number;
};
DTModel
SDK 基础模型
interface DTModel {
modelId: string;
url: string; // [v4.1.6] 模型对应的加载地址
position: DTVector3; // 位置
visible: boolean; // 是否可见
scale: DTVector3; // 缩放
rotation: { x: number; y: number; z: number; order: string }; // 四元数旋转【标准化】
set color(color: string); // 颜色
set opacity(opacity: number); // 透明度
set disabled(disabled: boolean); // 禁用
get disabled(): boolean;
set selected(selected: boolean); // 选中
get selected(): boolean;
dispose(): Promise<void>; // 销毁
removeFromParent(): Promise<void>; // 从父组件中移除
add(model: DTModel): Promise<void>; // 添加子组件
remove(model: DTModel): Promise<void>;
}
DTModelGroup
SDK 基础模型组
interface DTModelGroup<M extends DTModel> extends Array<M> {
set visible(visible: boolean); // 显示 / 隐藏
set color(color: string); // 颜色
set opacity(opacity: number); // 透明度
set disabled(disabled: boolean); // 禁用
dispose(): Promise<void>; // 销毁
removeFromParent(): Promise<void>; // 从父组件中移除
}
DTEvent
SDK 基础事件类
class DTEvent<P = Record<string, any>> {
stopped = false;
type: EventType;
public event: MouseEvent | undefined;
public params: P = {} as P;
constructor(type: ModelMouseEvent | RenderEvent | ModelEvent | string, p: P = {} as P) {
this.type = type;
this.params = p;
}
stopPropagation() {
this.stopped = true;
}
}
EventType
事件类型
type EventType = ModelMouseEvent | RenderEvent | ModelEvent | string;
enum ModelMouseEvent {
Click = "click",
Hover = "hover",
Blur = "blur", // [v4.1.4]
ContextMenu = "contextmenu",
DBlclick = "dblclick",
Mousemove = "mousemove"
}
enum RenderEvent {
Loading = "loading",
Loaded = "loaded",
Resize = "resize",
BeforeChange = "before-change", // [v4.1.4]
Change = "change",
Mounted = "mounted",
Dispose = "dispose",
Progress = "progress" // [v4.1.1] 渲染进度
}
enum ModelEvent {
Show = "show",
Hide = "hide",
Selected = "selected",
UnSelected = "UnSelected"
}
PluginOptions
插件配置参数
type PluginOptions<P, S, M> = {
setup(props: P, meta: Meta<M>): S;
render?(time: number): void;
destroyed?(): void;
} & ThisType<S>;
DefinedPlugin
定义 SDK 基础插件
type DefinedPlugin<P, S, M> = (props?: P) => PluginCreator<S, M>;
- 参考: PluginCreator
PluginCreator
SDK 基础插件创建器
type PluginCreator<S, M> = ((meta: Meta<M>) => DTPlugin<S>) & {
type: string;
key: string;
dispose: () => void;
};
- 参考: DTPlugin
DTPlugin
SDK 基础插件
type DTPlugin<S> = S;
DefinedWebglPlugin
定义 webgl
插件
type DefinedWebglPlugin<P, S> = (props: P) => WebglPluginCreator<S>;
WebglPluginCreator
webgl
插件创建器
type WebglPluginCreator<S> = (meta: WebglCreator) => WebglPlugin<S>;
- 参考: WebglPlugin
WebglPlugin
webgl
插件
type WebglPlugin<S> = {
type: string;
name: string;
render: (time: number) => void;
remove: () => void;
} & S;
OrbitControlProps
插件: orbitControl
的自定义参数
type OrbitControlProps = Record<string, any>;
DTLight
插件: light
的配置参数
type DTLight = {
type: string; // DirectionalLight、AmbientLight、SpotLight
color?: string | number; // 光照颜色,默认值对应以上三种类型: 0xffffff、0xbababa、0xb0b0b0
intensity?: number; // 光强, 默认值对应以上三种类型: 0.5、0.7、0.8
position?: number[]; // 光源位置,只有在SpotLight时生效,默认[0,0,0]
};
SkyBoxOptions
插件: skyBox
的配置参数
type SkyBoxOptions = {
path: string; // 天空盒路径,需要六张图片组合成天空盒,且图片名称必须为 negx 、 negy 、 negz 、 posx 、 posy 、 posz
type?: string // 图片格式,默认 .jpg
};
HoverColorOptions
插件: hoverColor
的颜色配置参数
type HoverColorOptions = {
color?: string; // 颜色,默认 #FF0000
opacity?: number; // 透明度,默认 0.5
};
StatsProps
插件: stats
的配置参数
type StatsProps = {
mode?: StatsMode; // 工作模式,默认0
};
enum StatsMode {
"fps" = 0, // 监视帧数模式,默认模式
"ms" = 1, // 监视帧渲染时间模式
"mb" = 2, // 监视内存占用模式
}
TextPoiOptions
插件: poi
的文字标签配置参数
type TextPoiOptions = {
text: string, // 标签文字内容
isSprite: boolean, // 是否为sprite,它是一个总面朝着相机的平面,默认为true
className: string; // [v4.1.0] 标签元素的class,可用于添加css样式
fixed: boolean; // 该参数只在unity引擎下生效
offsets: DTVector3; // [v4.1.4] 标签位置偏移量,默认值[0,0,0]
} & Omit<Partial<CSSStyleDeclaration>, 'position'>
ImagePoiOptions
插件: poi
的图片标签配置参数
type ImagePoiOptions = {
url: string, // 标签图片地址
isSprite: boolean, // 是否为sprite,它是一个总面朝着相机的平面,默认为true
className: string; // [v4.1.0] 标签元素的class,可用于添加css样式
fixed: boolean; // 该参数只在unity引擎下生效
offsets: DTVector3; // [v4.1.4] 标签位置偏移量,默认值[0,0,0]
} & Omit<Partial<CSSStyleDeclaration>, 'position'>
HtmlPoiOptions
插件: poi
的 Html
标签配置参数
type HtmlPoiOptions = {
el: string | HTMLElement, // Html元素 或 Html元素id
isSprite: boolean, // 是否为sprite,它是一个总面朝着相机的平面,默认为true
offsets: DTVector3; // [v4.1.4] 标签位置偏移量,默认值[0,0,0]
} & Omit<Partial<CSSStyleDeclaration>, 'position'>
OSOptions
插件: os
的连接配置参数
type OSOptions = ConnectOptions;
PathOptions
插件: path
的路线配置参数
type PathOptions = {
speed: number; // 是否有流动效果, speed>0,有流动效果
radius: number; // 管道的半径, 默认值为 0.15
tubularSegments: number; // 组成这一管道的分段数,默认值为 100
radialSegments: number; // 管道横截面的分段数目,默认值为 2
closed: boolean; // 管道的两端是否闭合,默认值为false
texture: string; // 纹理
color: string; // 颜色
indent: number; // 图片间距
repeatY: number; // [v4.1.5] 环绕的次数
offsetX: number; // [v4.1.5] 贴图单次重复中U的起始偏移量。 一般范围是由0.0到1.0。
offsetY: number; // [v4.1.5] 贴图单次重复中V的起始偏移量。 一般范围是由0.0到1.0。
transparent: boolean;
curveType: "centripetal" | "chordal" | "catmullrom"; //曲线的类型,默认值为catmullrom。
tension: number; // 曲线的张力,默认为0.5。
depthTest: boolean; // 曲线是否开启深度测试,默认为true。(不开启深度检测时:线段总是不被遮挡)
};
v4.1.4
BoxSelectionOptions插件: box-selection
的配置参数
type BoxSelectionOptions = PathOptions & {
mode: 'rect' | 'polygon'; // [v4.1.4] 框选的模式, rect: 自动计算矩形框选;polygon: 多边形框选
};
GPSCoordinate
插件: tool
的 GPS 坐标格式
type GPSCoordinate = {
longitude: number; // 经度
latitude: number; // 纬度
};
v4.1.5
RenderInterceptor类型: WebglConfig
的配置参数
type RenderInterceptor<M extends DTModel> = {
// 场景中每个模型渲染前的钩子函数
beforeRender?: (options: Options) => Options | void;
// 场景中每个模型渲染后的钩子函数
afterRender?: (component: Component<M>) => void;
};
WebglModel
type WebglModel = {
readonly target: Object3D;
} & Object3D & DTModel;
FitOptions
type FitOptions = {
target?: Component<DTModel> | DTModel;
speed?: number;
cw?: boolean;
};