270 lines
6.1 KiB
Markdown
270 lines
6.1 KiB
Markdown
---
|
||
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`
|
||
|