类型

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; // 是否自动调整位置
};

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: 沿着球面飞过去
};

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;
};

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

SDK 基础插件创建器

type PluginCreator<S, M> = ((meta: Meta<M>) => DTPlugin<S>) & {
  type: string;
  key: string;
  dispose: () => void;
};

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

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

插件: poiHtml 标签配置参数

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。(不开启深度检测时:线段总是不被遮挡)
};

BoxSelectionOptions v4.1.4

插件: box-selection 的配置参数

type BoxSelectionOptions = PathOptions & {
  mode: 'rect' | 'polygon'; // [v4.1.4] 框选的模式, rect: 自动计算矩形框选;polygon: 多边形框选
};

GPSCoordinate

插件: tool 的 GPS 坐标格式

type GPSCoordinate = {
  longitude: number; // 经度
  latitude: number; // 纬度
};

RenderInterceptor v4.1.5

类型: 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;
};
上次更新:
贡献者: zhengqian, yangxun, yanhao