deep-engine-demo/packages/docs/api/mesh/HtmlPanel.md

outline
2 3

HtmlPanel

• 源文件：packages/sdk/src/mesh/HtmlPanel.ts
• 文档位置：packages/docs/api/mesh/HtmlPanel.md

枚举：CssType

• 作用：CSS渲染类型枚举

枚举项	值	说明
CSS2D	'css2d'	枚举值 CSS2D。
CSS3D	'css3d'	枚举值 CSS3D。
CSS3DSprite	'css3dsprite'	枚举值 CSS3DSprite。

类：HtmlPanel

• 作用：HTML面板基础类

构造函数

new HtmlPanel(public type: CssType = CssType.CSS3D)

• 作用：构造函数

• 入参：

参数名	类型	必填	说明
type	CssType	否	CSS渲染类型

• 出参：HtmlPanel
• 返回说明：返回当前类实例。

属性

属性名	可见性	类型	作用
container	public	HTMLDivElement	用于保存 container 对应的数据。
cssObject	public	THREE.Object3D	用于保存 cssObject 对应的数据。
isVisible	public	boolean	用于标记 isVisible 的启用状态。
position	public	THREE.Vector3	位置数据。

方法

getCssObject(): THREE.Object3D<THREE.Object3DEventMap>

• 作用：获取CSS对象

• 入参：无

• 出参：THREE.Object3D<THREE.Object3DEventMap>

• 返回说明：返回 THREE.Object3D<THREE.Object3DEventMap>。

getUniqueId(): string

• 作用：获取唯一ID

• 入参：无

• 出参：string

• 返回说明：CSS对象的UUID

show(): void

• 作用：显示面板

• 入参：无

• 出参：void

• 返回说明：无返回值。

hide(): void

• 作用：隐藏面板

• 入参：无

• 出参：void

• 返回说明：无返回值。

toggle(): void

• 作用：切换面板可见性

• 入参：无

• 出参：void

• 返回说明：无返回值。

updatePosition(position: THREE.Vector3): void

• 作用：更新面板位置

• 入参：

参数名	类型	必填	说明
position	THREE.Vector3	是	新位置

• 出参：void
• 返回说明：无返回值。

updateContent(content: string): void

• 作用：更新面板内容

• 入参：

参数名	类型	必填	说明
content	string	是	新内容

• 出参：void
• 返回说明：无返回值。

getVisible(): boolean

• 作用：获取弹窗可见性

• 入参：无

• 出参：boolean

• 返回说明：返回布尔结果。

changeCssType(type: CssType): THREE.Object3D<THREE.Object3DEventMap>

• 作用：动态修改CSS类型

• 入参：

参数名	类型	必填	说明
type	CssType	是	新的CSS渲染类型

• 出参：THREE.Object3D<THREE.Object3DEventMap>
• 返回说明：新的CSS对象

getCssType(): CssType

• 作用：获取当前CSS类型

• 入参：无

• 出参：CssType

• 返回说明：返回 CssType。

dispose(): void

• 作用：销毁面板，清理所有资源

• 入参：无

• 出参：void

• 返回说明：无返回值。

createCssObject(): void

• 作用：创建CSS对象

• 入参：无

• 出参：void

• 返回说明：无返回值。

构造示例

• 来源：packages/demo/src/components/htmlPanel/DrillingModal.ts

/**
 * 钻进信息面板类
 */
export class DrillingModal extends HtmlPanel {
    private drillingData: IDrillingData = {
        pipeName: '',
        drillingSpeed: 0,
        currentDepth: 0,
        targetDepth: 0,
        progress: 0,
        pipeRadius: 0,
        status: 'stopped'
    };

函数示例

HtmlPanel.getCssObject

• 来源：packages/demo/src/panels/GoldMineScene/VentilationFillingPanel.vue

  if (fillingHtmlPanel) {
    viewer?.scene.remove(fillingHtmlPanel.getCssObject());
    fillingHtmlPanel = null;
  }

HtmlPanel.getUniqueId

• 来源：packages/demo/src/htmlPanel/GoldMineScene/AirSupplyHtmlPanel.ts

    /**
     * 构造函数
     * @param type CSS渲染类型
     */
    constructor(type: CssType = CssType.CSS2D) {
        super(type);
        this.uuid = this.getUniqueId();
        this.initContent();
        this.attachDeleteEvent();
    }

HtmlPanel.show

• 来源：packages/demo/src/panels/GoldMineScene/VentilationFillingPanel.vue

  // 初始化数据
  fillingHtmlPanel.updateData({
    progress: fillingStatus.value.progress,
    currentTime: (Date.now() - fillingStatus.value.startTime) / 1000,
    endTime: fillingParams.value.endTime,
    material: fillingParams.value.material,
    fillingRate: fillingParams.value.fillingRate,
    pressure: fillingParams.value.pressure,
    status: fillingStatus.value.isRunning ? 'running' : 'stopped'
  });

  fillingHtmlPanel.updatePosition(new THREE.Vector3(position.x, position.y + 1, position.z));
  fillingHtmlPanel.show();
  viewer?.scene.add(fillingHtmlPanel.getCssObject());
};

Demo 参考

CssType

以下示例文件中可以看到该 API 的实际调用方式：

• packages/demo/src/components/htmlPanel/DrillingModal.ts
• packages/demo/src/components/htmlPanel/PrintModelModal.ts
• packages/demo/src/components/htmlPanel/RuptureEventModal.ts
• packages/demo/src/components/htmlPanel/SensorModal.ts
• packages/demo/src/components/htmlPanel/SingleSensorModal.ts
• packages/demo/src/components/htmlPanel/TunnelModal.ts
• packages/demo/src/disasterFormationPanel/TunnelScene/RockBurstPanel.vue
• packages/demo/src/disasterFormationPanel/TunnelScene/RuptureEventPanel.vue

HtmlPanel

以下示例文件中可以看到该 API 的实际调用方式：

• packages/demo/src/components/htmlPanel/DrillingModal.ts
• packages/demo/src/components/htmlPanel/PrintModelModal.ts
• packages/demo/src/components/htmlPanel/RuptureEventModal.ts
• packages/demo/src/components/htmlPanel/SensorModal.ts
• packages/demo/src/components/htmlPanel/SingleSensorModal.ts
• packages/demo/src/components/htmlPanel/TunnelModal.ts
• packages/demo/src/htmlPanel/GoldMineScene/AirSupplyHtmlPanel.ts
• packages/demo/src/htmlPanel/GoldMineScene/DrillingHtmlPanel.ts