在山海鲸的 3D 模型组件中添加自定义标记点并实现点击显示详情的功能,可按以下步骤操作,核心通过 “热点组件 + 交互事件 + 信息弹窗” 实现:
一、添加自定义热点标记
插入热点组件
在左侧组件库中,搜索 “标记点” 组件(通常在 “三维交互” 分类下),将其拖拽到 3D 模型的目标位置(如设备关键部位、建筑特定区域)。
自定义热点样式
选中标记点组件,在右侧属性面板的 “样式” 中设置:
- 形状:选择自定义图标(如圆形、三角形、图片图标),支持上传本地图片作为热点标记(建议用 PNG 透明背景图);
- 颜色 / 大小:调整热点的填充色、边框色(如红色突出显示),设置尺寸(如 15-30 像素,确保在 3D 场景中清晰可见);
- 动画效果:勾选 “呼吸效果”“闪烁效果”,让热点更易被注意到(适合重要位置标记)。
精准定位热点
在 “位置” 属性中,通过以下方式调整热点坐标,使其贴合 3D 模型表面:
- 直接输入 X/Y/Z 轴坐标(可参考模型的本地坐标系);
- 开启 “吸附模式”(部分版本支持),热点会自动吸附到模型表面;
- 在 3D 视图中,用鼠标拖动热点至目标位置,配合旋转视角微调。
二、设置点击显示详细信息
添加弹窗组件
从组件库中拖拽 “信息弹窗” 组件到场景,在弹窗中编辑详细信息:
- 添加文本(如设备名称、参数、状态描述);
- 插入图片(如设备说明书截图、二维码);
- 设置表格(如历史数据、维护记录)。
绑定点击交互事件
选中热点组件,进入右侧 “交互” 面板: