模型标注插件

ModelMakerPlugin

功能说明

模型标注插件提供了以下功能：

提供三维空间中的标注模型，包括区域标注(prism)模型、盒(box)模型和多边形(triangles)模型

效果展示

安装引用

请按需选择 yarn 或 npm 安装方式：

npm
Yarn
pnpm

npm install @realsee/dnalogel

yarn add @realsee/dnalogel

pnpm add @realsee/dnalogel

插件方法

初始化

import { class Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five } from '@realsee/five'
import { const ModelMakerPlugin: (five: import("@realsee/five").Five, config?: {
    tagContainerZIndex?: number;
    occlusionVisibility?: boolean | import("@realsee/five").Mode[];
    occlusionMode?: "translucence" | "depthTest";
}) => ModelMakerPluginType.ModelMakerControllerModelMakerPlugin } from "@realsee/dnalogel";

const const five: Fivefive = new new Five(initArgs?: FiveInitArgs | undefined): Five如视 VR Web展示器
@example// 初始化构造函数
const five = new Five();
// 将绘制区域添加到页面上
five.appendTo(document.body);
// 加载 Work 数据
five.load({...});Five({
    FiveInitArgs.plugins?: (((five: Five) => void) | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null] | [Plugin: ((five: Five) => any) | ((five: Five, parameters: any) => any), instanceName: string | null, parameters: any] | [Plugin: (five: Five) => any, instanceName: string | null])[] | undefined插件定义
@description详见插件部分。plugins: [
        [
            const ModelMakerPlugin: (five: import("@realsee/five").Five, config?: {
    tagContainerZIndex?: number;
    occlusionVisibility?: boolean | import("@realsee/five").Mode[];
    occlusionMode?: "translucence" | "depthTest";
}) => ModelMakerPluginType.ModelMakerControllerModelMakerPlugin,
            'modelMakerPlugin', // 自定义插件名称
        ]
    ]
})

const const plugin: anyplugin = const five: Fivefive.Five.plugins: {
    [key: string]: any;
}插件暴露的方法plugins.__type[string]: anymodelMakerPlugin

加载数据

数据结构声明

const plugin: Controllerplugin.Controller.load(serverData: ServerData): Promise<void>加载插件依赖数据
@paramserverData 插件数据@paramstate 插件 Stateload(const data: ServerDatadata)

启用/禁用/显示/隐藏插件

const plugin: Controllerplugin.Controller.enable(): void启用插件，让插件能够响应交互enable()

const plugin: Controllerplugin.Controller.disable(): void禁用插件，让插件停止响应交互disable()

const plugin: Controllerplugin.Controller.show(): void展示UIshow()

const plugin: Controllerplugin.Controller.hide(): void隐藏UIhide()

销毁插件

const plugin: Controllerplugin.Controller.dispose(): void插件进行销毁dispose()

事件监听

事件类型

const plugin: Controllerplugin.Controller<State, EventMap>.hooks: Subscribe<EventMap>@description: 插件事件钩子hooks.Subscribe<EventMap>.on<"show">(name: "show", callback: (event: {
    userAction: boolean;
}) => void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('show', () => {
  var console: Consoleconsole.Console.log(...data: any[]): voidMDN Referencelog('插件展示')
})

const plugin: Controllerplugin.Controller<State, EventMap>.hooks: Subscribe<EventMap>@description: 插件事件钩子hooks.Subscribe<EventMap>.on<keyof EventMap>(name: keyof EventMap, callback: (...args: [event: {
    userAction: boolean;
}] | [event: {
    userAction: boolean;
}] | [event: {
    userAction: boolean;
}] | [event: {
    userAction: boolean;
}] | [data: ServerData, prevData?: ServerData | undefined] | [data: ...] | [] | [params: ...]) => void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('show
hide
enable
disable
dataChange
dataLoaded
dispose
stateChange')

标注方法

插件中加载的每个标注都是一个item。

获取 item

方式1

const const item: ModelMakerBaseItemitem = const plugin: Controllerplugin.Controller.getItemById(id: string | number): ModelMakerBaseItemgetItemById(1)

方式2

const const item: ModelMakerBaseItemitem = const plugin: Controllerplugin.Controller.items: ModelMakerBaseItem[]items[0]

启用/禁用/显示/隐藏item

const item: ModelMakerBaseItemitem.ModelMakerBaseItem.enable(): voidenable()

const item: ModelMakerBaseItemitem.ModelMakerBaseItem.disable(): voiddisable()

const item: ModelMakerBaseItemitem.ModelMakerBaseItem.show(): voidshow()

const item: ModelMakerBaseItemitem.ModelMakerBaseItem.hide(): voidhide()

显示/隐藏 item 模型

// 显示
const item: ModelMakerBaseItemitem.ModelMakerBaseItem.model: Object3Dmodel.Object3D.visible: booleanObject gets rendered if true.visible = true 

// 隐藏
const item: ModelMakerBaseItemitem.ModelMakerBaseItem.model: Object3Dmodel.Object3D.visible: booleanObject gets rendered if true.visible = false

显示/隐藏 item 标签

// 显示
const item: ModelMakerBaseItemitem.ModelMakerBaseItem.tag: LightTagtag?.LightTag.show(params?: {
    force?: boolean | undefined;
} | undefined): void@description显示标签show()

// 隐藏
const item: ModelMakerBaseItemitem.ModelMakerBaseItem.tag: LightTagtag?.LightTag.hide(): void@description隐藏标签hide()

自定义 item 标签样式

// 自定义 box 标签渲染
const plugin: Controllerplugin.Controller.registerTagRenderer(map: Partial<Record<"box" | "triangles" | "prism", ElementRenderer>>): voidregisterTagRenderer({ 'box': (container: HTMLElementcontainer: HTMLElement, item: ModelMakerBaseItemitem: class ModelMakerBaseItemModelMakerBaseItem) => {
  // 示例
  container: HTMLElementcontainer.InnerHTML.innerHTML: stringMDN ReferenceinnerHTML = item: ModelMakerBaseItemitem.ModelMakerBaseItem.rawData: anyrawData.name

  // 支持 React
  // ReactDOM.render(<div>{item.rawData.name}</div>, container)

  // 返回一个销毁函数
  return () => {
    container: HTMLElementcontainer.InnerHTML.innerHTML: stringMDN ReferenceinnerHTML = ''
  }
}})

item 事件监听

事件类型

const item: ModelMakerBaseItemitem.Subscribe<Event>.on<"show">(name: "show", callback: () => void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('show', () => {
  var console: Consoleconsole.Console.log(...data: any[]): voidMDN Referencelog('item展示')
})

const item: ModelMakerBaseItemitem.Subscribe<Event>.on<keyof Event>(name: keyof Event, callback: (...args: [] | [item: ModelMakerBaseItem]) => boolean | void, once?: boolean | undefined): () => void注册事件
@paramname - 事件类型@paramcallback - 事件回调函数@paramonce - 是否只执行一次@returns解除事件@templateK - 预设的监听事件名称@templateC - 回调函数函数上下文on('show
enable
disable
hide
click')

数据结构

插件事件类型

export interface EventMap {
  /** 插件展示 */
  show: () => void

  /** 插件隐藏 */
  hide: () => void

  /** 插件启用 */
  enable: () => void

  /** 插件禁用 */
  disable: () => void

  /** 数据加载完成 */
  dataLoaded: () => void

  /** 插件被销毁 */
  dispose: () => void
}

item 事件类型

export interface EventMap {
  /** item展示 */
  show: () => void

  /** item隐藏 */
  hide: () => void

  /** item启用 */
  enable: () => void

  /** item禁用 */
  disable: () => void

  /** item被点击 */
  click: () => void
}

load数据

/** load 的数据 */
export interface ServerData {
  list: (ServerBoxItem | ServerTrianglesItem | ServerPrismItem)[]
}

export interface ServerBaseItem {
  /** 唯一标识 */
  id?: number
  /** 标签名 */
  name?: string
}

export interface ServerBoxItem extends ServerBaseItem {
  type: 'box'
  object_data: {
    /** box 的其中一个顶点坐标 */
    start: number[]
    /** start 对角位置的顶点坐标 */
    end: number[]
    /** box 的欧拉角旋转，旋转顺序是 [XYZ] */
    rotation?: number[]
    /** 标注颜色 */
    color?: string
    /** 透明度 */
    opacity?: number
  }
}

export interface ServerTrianglesItem extends ServerBaseItem {
  type: 'triangles'
  object_data: {
    /** 多边形的顶点坐标数组 */
    points: number[][]
    /** 标注颜色 */
    color?: string
    /** 透明度 */
    opacity?: number
  }
}

export interface ServerPrismItem extends ServerBaseItem {
  type: 'prism'
  object_data: {
    /** 绘制平面的三维世界坐标点数组 */
    points: number[][]
    /** 楼层高度 */
    height: number
    /** 所在楼层 */
    floorIndex?: number
    /** 人工设置的y坐标方向偏移 */
    fixedY?: number
    /** 人工设置的高度修正 */
    fixedHeight?: number
    /** 标注颜色 */
    color?: string
    /** 透明度 */
    opacity?: number
  }
}

ModelMakerPlugin​

功能说明​

效果展示​

安装引用​

插件方法​

初始化​

加载数据​

启用/禁用/显示/隐藏插件​

销毁插件​

事件监听​

标注方法​

获取 item​

启用/禁用/显示/隐藏item​

显示/隐藏 item 模型​

显示/隐藏 item 标签​

自定义 item 标签样式​

item 事件监听​

数据结构​

插件事件类型​

item 事件类型​

load数据​

ModelMakerPlugin

功能说明

效果展示

安装引用

插件方法

初始化

加载数据

启用/禁用/显示/隐藏插件

销毁插件

事件监听

标注方法

获取 item

启用/禁用/显示/隐藏item

显示/隐藏 item 模型

显示/隐藏 item 标签

自定义 item 标签样式

item 事件监听

数据结构

插件事件类型

item 事件类型

load数据