poi

该插件用于给 模型 / 坐标 添加 文字 / 图片 / html元素 标签

• 插件名称

  poi

• 初始参数

  • 无

• 示例

import { webglPlugin } from "@tslfe/dt-enging"
...省略获取meta实例的步骤...

const poiPlugin = meta.plugin.use(webglPlugin.poi());

属性

css3DRender

渲染器

• 参考: CSS3DRender

keepVisible v4.1.4

是否保持 poi 一直可见， 默认为 true

方法

createText( )

创建文字标签

function createText: (options?: Partial<TextPoiOptions>) => PoiInstance

• 参数

  • options: 文字标签配置参数

    • 参考: TextPoiOptions

• 返回值

  • PoiInstance: 标签实例

    • 注: 标签实例具有3个方法，用于将该标签应用到场景中

    • 参考: applyToComponent( ); applyToType( ); applyToPosition( )

• 示例

...省略挂载poi插件的步骤...

const poiText = poiPlugin.createText({
    text: "123",
    className: "testPoi"
});

createImage( )

创建图片标签

function createImage: (options?: Partial<ImagePoiOptions>) => PoiInstance

• 参数

  • options: 图片标签配置参数

    • 参考: ImagePoiOptions

• 返回值

  • PoiInstance: 标签实例

    • 注: 标签实例具有3个方法，用于将该标签应用到场景中

    • 参考: applyToComponent( ); applyToType( ); applyToPosition( )

• 示例

...省略挂载poi插件的步骤...

const poiImage = poiPlugin.createImage({
    url: "https://xxx.xxx",
    className: "testPoi"
});

createHtml( )

创建 Html 标签

function createHtml: (options?: Partial<HtmlPoiOptions>) => PoiInstance

• 参数

  • options: Html 标签配置参数

    • 参考: HtmlPoiOptions

• 返回值

  • PoiInstance: 标签实例

    • 注: 标签实例具有2个方法，用于将该标签应用到场景中

    • 参考: applyToComponent( ); applyToPosition( )

• 示例

...省略挂载poi插件的步骤...

const div = document.createElement("div");
div.id = "testDiv";
div.style.width = "5px";
div.style.height = "5px";
div.style.backgroundColor = "red";
document.querySelector("#three-container").appendChild(div);

const poiHtml = poiPlugin.createHtml({
    el: "testDiv"
});

applyToComponent( )

将标签应用于组件

function applyToComponent(
    component: Component<M> | Component<M>[],
    interceptor?: (component: Component<M>, options: O)=>O
): Array<CSS3DObject>;

• 参数

  • component: 目标组件

    • 参考: Component

  • interceptor: v4.1.4 拦截器回调函数，可以获取到 组件 和 配置参数 ，继而修改配置参数（包括标签的坐标等）

• 返回值

  • Array<CSS3DObject> v4.1.4

• 示例

...省略挂载poi插件的步骤...

const poiText = poiPlugin.createText({
    text: "testPoi"
});
const component = meta.get("ModelId");
poiText.applyToComponent(component, (component, options) => {
    options.positions.y += 10;
    return options
});

applyToType( )

将标签应用于某一类组件

function applyToType(
    type: string | string[],
    interceptor?: (component: Component<M>, options: O)=>O
): Array<CSS3DObject>;

• 参数

  • type: 目标组件真实类型

    • 参考: Component.type

  • interceptor: 拦截器回调函数，可以获取到 组件 和 配置参数 ，继而修改配置参数（包括标签的坐标等）

• 返回值

  • Array<CSS3DObject> v4.1.4

• 示例

...省略挂载poi插件的步骤...

const poiText = poiPlugin.createText({
    text: "testPoi"
});
poiText.applyToType("Type", (component, options) => {
    options.positions.y += 10;
    return options
});

applyToPosition( )

将标签应用于某一坐标

function applyToPosition(position: DTVector3): Array<CSS3DObject>;

• 参数

  • position: 目标坐标

    • 参数: DTVector3

• 返回值

  • Array<CSS3DObject> v4.1.4

• 示例

...省略挂载poi插件的步骤...

const poiText = poiPlugin.createText({
    text: "testPoi"
});
poiText.applyToPosition({x: 50, y: 50, z: 50});

clearAll( )

清空所有标签

function clearAll: () => Array<CSS3DObject>

• 参数

  • 无

• 返回值

  • Array<CSS3DObject>

• 示例

...省略挂载poi插件的步骤...

poiPlugin.clearAll();

clear( )

清除某个 或 某组 目标的标签

function clear: (list: Array<Component<WebglModel> | DTVector3> | Component<WebglModel> | DTVector3) => Promise<void>

• 参数

  • list: 目标

    • 参考: Component; DTVector3

• 返回值

  • Promise<void>

• 示例

...省略挂载poi插件的步骤...

const componentGroup = meta.search("AICamera");
poiPlugin.clear(componentGroup);

dispose( )

销毁所有标签，与 clearAll( ) 的区别在于: 销毁了为 poi 插件创建的图层（一个全屏覆盖的 div 元素）

function dispose: () => void

• 参数

  • 无

• 返回值

  • 无

• 示例

...省略挂载poi插件的步骤...

poiPlugin.dispose()

update( )

更新，该方法会在每次渲染时 自动调用

function update: () => void

• 参数

  • 无

• 返回值

  • 无

addEventListener( ) v4.1.4

监听创建poi的鼠标事件，默认情况下poi可捕获鼠标事件

注：如需防止poi捕获鼠标事件，可设置css参数：pointerEvents = "none"

function addEventListener: (
    type: ModelMouseEvent, 
    listener: (
        data: {
            target: Component<WebglModel> | DTVector3;
            poi: CSS3DObject;
            event: MouseEvent;
        }
    ) => void
) => () => void

• 参数

  • type: ModelMouseEvent 事件名称（eg: click） ModelMouseEvent
  • listener: (data: { target: Component<WebglModel> | DTVector3; poi: CSS3DObject; event: MouseEvent; }) => void 事件回调

• 返回值

  • remove: ()=>void 移除事件监听的函数句柄