深浅模式
TransformPanel 变形信息框
说明
用于快速构建一个三维的信息面板,该面板与ZoomPanel的区别在于,它不仅会跟着视角的缩放而缩放,还会跟着摄像机的方向进行旋转
安装
sh
npm install @poggi/three-entity
pnpm add @poggi/three-entity
yarn add @poggi/three-entity基础用法
通过使用usePanelTemplateDOM构建一个信息框专用的DOM节点,之后将节点挂载到面板中,即可构建出一个信息面板
案例中还使用了
usePanelLine,构建一条连接线,线条默认将父级与面板进行连接可以清晰的表达出,该面板是谁的信息。你也可以手动传入两个连接点位,构建特定的连线
loading
与现代框架组件集成
你可以将usePanelTemplateDOM构建的DOM,交给现代框架进行托管,使其具备更多的功能
loading
API
Attributes
| 属性名 | 说明 | 类型 |
|---|---|---|
| scaleRatio | 缩放比例 | number |
| initShow | 是否初始显示 | boolean |
| switchVisible | 切换园区时面板的显示状态(默认为initShow) | boolean |
Methods
constructor(panelData: IPanelData)
构造函数
Interfaces
IPanelData
| 属性名 | 说明 | 类型 | 是否必选 | 默认值 |
|---|---|---|---|---|
| element | 渲染DOM | HTMLElement | 是 | - |
| initShow | 是否初始显示 | boolean | true | |
| scaleRatio | 缩放比例 | number | 0.02 |
