节点编辑模块Demo

# Demo路径

访问地址：[http://192.168.10.66:8081/webglnode/](http://192.168.10.66:8081/webglnode/ "http://192.168.10.66:8081/webglnode/")

![Demo界面截图](/media/202504/2025-04-30_143632_2316310.044353650597812044.png)

## 一、全景图预览功能

- &zwnj;**功能描述**&zwnj;：支持线上全部全景图的实时预览，资源存放在服务器`webgl`文件夹下。
- &zwnj;**操作流程**&zwnj;：
  - 全景图选择界面会异步加载所有全景图。
  - 加载完成后，即可在预览窗口观察全景图效果。
  - 点击选择按钮可以打开/关闭选择窗口。
  - 点击放大按钮可以将预览窗口放大。
  - 在预览窗口中，左键拖动可以以360度视角预览全景图效果。

![全景图预览界面截图](/media/202504/2025-04-30_143803_8644640.537170040549054.png)

## 二、节点编辑

- &zwnj;**创建节点**&zwnj;：在空白网格处右键，即可选择并创建预制的节点。
- &zwnj;**操作流程**&zwnj;：
  - 选中要创建的节点类型。
  - 在当前位置右键，即可创建该节点。
- &zwnj;**重点提示**&zwnj;：除了训练开始节点外，其他节点支持双击标题栏进行编辑。

![节点编辑界面截图](/media/202504/2025-04-30_144013_8496340.12587748405814414.png)

### 2-1 中转场景节点

- &zwnj;**编辑功能**&zwnj;：双击标题栏开始编辑节点信息。
- &zwnj;**功能预览**&zwnj;：
  - 当全景图处于平铺状态时，可以在工具栏中创建按钮，并拖拽按钮进行定位。
  - 当全景图处于360度渲染状态时，可以预览平铺状态下设置的按钮位置。

![中转场景节点编辑界面截图](/media/202504/2025-04-30_144322_6136670.4910485792810432.png)

### 2-2 场景ID编辑（`需要说明`）

![](/media/202505/2025-05-05_131219_7256160.3605518877377165.png)

## 三、操作流程

1. 点击工具栏中的创建按钮图标。
![按钮拖拽与定位截图1](/media/202504/2025-04-30_144519_1453400.9147966107685088.png)
2. 屏幕中间会出现与图标相同的按钮。
![按钮拖拽与定位截图2](/media/202504/2025-04-30_144551_9276920.4033803089453729.png)
3. 拖拽该按钮到合适的位置（例如工人的帽子上）。
![按钮拖拽与定位截图3](/media/202504/2025-04-30_144715_4643970.0356576714565775.png)
4. 点击【查看】按钮，变更为360全景渲染模式。
![360全景渲染模式截图](/media/202504/2025-04-30_144750_4197580.7437143880496091.png)
5. 在渲染后的图片上右键旋转视角，找到工人，此时按钮应出现在工人的帽子上。
![最终效果截图](/media/202504/2025-04-30_144823_6510070.003948816853807213.png)