---
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`

```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`

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

### `HtmlPanel.getUniqueId`

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

```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`

```ts
  // 初始化数据
  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`