ZoomPanel 缩放信息框

用于快速构建一个三维的信息面板，该面板与TransformPanel的区别在于，它始终朝向用户，并不会根据模型的朝向一起变化

基础用法

通过使用ZoomPanel的静态方法createDOM构建一个信息框专用的DOM节点，之后将节点挂载到面板中，即可构建出一个信息面板

需要注意，因为三维面板的节点最终统一构建在信息容器节点中，因此它们的样式不能使用scope封锁，需要放在全局中才可生效
案例中还使用了showLine，构建一条连接线，可以清晰的表达出，该面板是谁的信息，不过需要注意的是，一定要在它被添加到对应模型或者场景中后再调用该方法。

连线锚点控制

我们可以在构建DOM节点时，通过anchorPoint来控制面板的连线锚点，配合面板的坐标以此更为灵活的控制连接效果

注意，这里是控制的连线锚点，而不是面板的方位

刷新面板内容

在构建好面板内容后，我们可以调用updateContent来修改其中的内容

第三方库管理DOM

在使用createDOM构建节点时，我们也可以传入由第三方库管理的DOM节点，以此更为方便的管理DOM内容，这里以vue3的方式来做示例，现在尝试修改一下输入框的值，可以看到面板中的数据会同步变更

注意，使用第三方库管理的DOM节点，无法使用updateContent来修改内容

Options

IPanel3Data

属性名	说明	类型	默认值
element	面板管理的DOM节点	HTMLElement	-
initShow	是否初始显示面板	boolean	true

IPanel3DOM

属性名	说明	类型	默认值
element	节点html内容	string	-
className	类样式名	string	-
anchorPoint	连线定位锚点（与offset属性二选一）	AnchorPoint3	AnchorPoint3.CENTER
offset	连线位置偏移值（与anchorPoint二选一）	[string,string]	-

IPanel3TemplateDOM

属性名	说明	类型	默认值
className	类样式名	string	-
anchorPoint	连线定位锚点（与offset属性二选一）	AnchorPoint3	AnchorPoint3.CENTER
offset	连线位置偏移值（与anchorPoint二选一）	[string,string]	-

AnchorPoint3

枚举值	说明
LEFTTOP	左上角
TOP	上
RIGHTOP	右上角
LEFT	左
CENTER	中央
RIGHT	右
LEFTBOTTOM	左下
BOTTOM	下
RIGHTBOTTOM	右下

IPanel3Line

属性名	说明	类型	默认值
startPoints	线条起始坐标	RTHREE.Vector3	原点
endPoints	线条结束坐标	RTHREE.Vector3	面板当前坐标
lineColor	线条颜色	RTHREE.ColorRepresentation	0xFFFFFF

static Methods

createDOM(domData: IPanel3DOM)

创建普通三维面板节点

const panelElement = RTHREE.Panel3.createDOM({
    element: `<span class="model-name">正方体</span>`,
    anchorPoint: AnchorPoint.BOTTOM
});

const panelElement2 = RTHREE.Panel3.createDOM({
    element: `<span class="model-name">正方体</span>`,
    offset: ['30px', '-50%']
});

createTemplateDOM(domData: IPanel3TemplateDOM)

创建用于第三方挂载的模板节点

Methods

updateContent(content: string)

要变更为的内容，仅用于使用createDOM静态方法构建的三维面板

... //省略构建的过程
panel.updateContent(`<span class="model-name">修改后的正方体</span>`);

createLine(lineData？： IPanel3Line)

构建面板面板连接线条，仅当第一次调用时生效

... //省略构建的过程
panel.createLine();