热点交互
热点是全景编辑器中最核心、最复杂的交互模块,负责将静态的全景照片转化为拥有丰富信息入口与场景穿梭能力的可交互空间。每个全景项目最多支持 300 个热点。
热点类型总览
编辑器支持 10 种热点显示类型,覆盖了几乎所有的商业交互需求:
| 热点类型 | 说明 | 典型用途 |
|---|---|---|
| 图标热点 | 使用自定义图标图片(PNG/GIF)或系统内置图标 | 场景跳转按钮、信息标记点 |
| 文字热点 | 直接在全景空间中显示一段文字标签 | 区域名称标注、设备编号标识 |
| 圆点热点 | HTML 渲染的圆形标记,可自定义颜色/大小/边框 | 简洁的导航指示器 |
| 序列帧热点 | 将精灵图(Sprite Sheet)拆分为帧动画播放 | 动态箭头、呼吸发光效果 |
| 图片热点 | 在全景3D空间中嵌入一张平面图片 | 嵌入式海报、展品照片 |
| 视频热点 | 在全景空间中嵌入视频播放器 | 产品演示视频、讲解员视频 |
| 3D模型热点 | 在全景中嵌入 Three.js 渲染的 GLTF/GLB 模型 | 虚拟家具、产品展示 |
| 多边形热点 | 在全景表面绘制多顶点多边形区域 | 区域高亮、地面标注 |
| 折线热点 | 在全景表面绘制多顶点连线路径 | 路线指引、管线标识 |
| 场景热点 | 圆点热点的特殊变体,专用于场景跳转 | 地面导航点 |
添加与管理热点
添加方式
- 手动添加:点击「添加热点」按钮后在全景画面中点击目标位置,系统自动在该坐标创建一个图标热点
- 模板添加:点击「模板添加」从预设热点模板库中选择已配置好样式和动作的热点快速创建,大幅提升批量制作效率
热点列表
右侧面板以列表形式展示当前场景的所有热点,每个热点条目显示:
- 热点图标/类型缩略图
- 热点标题文字
- 绑定的功能类型(如"场景跳转"、"图片弹窗"等)
热点操作
对列表中的每个热点,支持以下操作:
- 复制:快速克隆一个热点(包含其全部属性配置)
- 锁定/解锁:锁定后热点无法被拖拽移动,防止编辑时误操作
- 隐藏/显示:临时隐藏热点但不删除,便于编辑密集区域
- 删除:永久移除此热点
- 提交预设:将当前热点的完整配置保存为可复用模板
- 拖拽排序:长按拖拽调整热点在列表中的顺序
热点基础设置
选中一个热点后进入编辑抽屉面板,分为「基础设置」和「高级设置」两个标签页。
显示样式配置
根据热点的显示类型(showType),配置不同的外观属性:
- 图标选择:从内置图标库中选取,或上传自定义 PNG/GIF 图标
- 图标缩放 (scale):控制热点在画面中的显示大小比例
- 3D 跟随 (distorted):开启后热点会随全景透视变化产生远小近大的空间深度感
- 旋转角度 (rotate):设置热点的静态旋转角度
- 透明度 (alpha):0(全透明)到 1(不透明)
位置坐标
- 水平角度 (ath):热点在全景中的水平位置,范围 -180° ~ 180°
- 垂直角度 (atv):热点在全景中的垂直位置,范围 -90° ~ 90°
- 可通过在画布中直接拖拽热点来调整位置,面板数值会实时同步更新
标题与提示层
为热点添加文字标注:
- 标题文字:显示在热点旁边的文字标签
- 文字大小/颜色/字体:精确控制标题的排版样式
- 装饰边框:内置多种风格边框(科技风、中国风、简约风等)
- 位置方向:标题可放置在热点的上/下/左/右方
- 偏移微调:通过 X/Y 偏移量精细调整标题与热点的相对距离
- 显示模式:始终显示 / 鼠标悬停时显示
热点点击动作(16 种)
每个热点可绑定一种点击触发行为,系统提供 16 种动作类型:
| # | 动作类型 | 详细说明 |
|---|---|---|
| 1 | 场景切换 | 跳转到指定全景场景。可设定进入时的目标视角(hlookat/vlookat/fov),以及过渡动画类型(淡入、缩放、黑场等12种)和过渡时间 |
| 2 | 上一个场景 | 按场景列表顺序自动跳转到前一个场景 |
| 3 | 下一个场景 | 按场景列表顺序自动跳转到后一个场景 |
| 4 | 打开链接 | 打开外部 URL。支持三种打开方式:新窗口打开 / 当前窗口替换 / 内嵌 iframe 弹窗 |
| 5 | 图片弹窗 | 弹出全屏图片查看器。支持上传多张图片形成画廊,自动生成翻页和缩略图导航。支持设置自动轮播间隔时间 |
| 6 | 视频弹窗 | 弹出视频播放器。支持上传或粘贴在线视频地址。可设置关闭弹窗时是否暂停全景背景音乐 |
| 7 | 文字/富文本弹窗 | 弹出一个富文本内容面板,支持标题、正文、图文混排。使用所见即所得编辑器编辑内容 |
| 8 | PDF 文档 | 弹出 PDF 在线阅读器。上传 PDF 文件后用户可在弹窗中翻页浏览,适合说明书、合同等场景 |
| 9 | 音频播放 | 点击后播放/暂停一段音频。支持循环播放和音量控制 |
| 10 | 拨打电话 | 移动端点击后直接呼叫指定手机号/固话。PC 端显示号码可复制 |
| 11 | 导航定位 | 点击后打开地图导航应用(高德/百度),引导用户前往指定GPS经纬度坐标。适合文旅/商业地产项目 |
| 12 | 小程序跳转 | 打开指定微信小程序的页面路径。需配置小程序 AppID 和页面路径 |
| 13 | 3D 模型弹窗 | 弹出独立的 3D 模型交互查看器。上传 GLTF/GLB 文件后用户可在弹窗中 360° 旋转查看 |
| 14 | 逐帧环物 | 360° 环绕展示一个物品的多角度照片序列。上传一组不同角度拍摄的照片后自动生成可拖拽的环物查看器 |
| 15 | 自定义动作 | 执行自定义的 Krpano XML Action 代码。面向高级用户,可调用底层 API 实现任何自定义交互逻辑 |
| 16 | 无动作 | 热点仅用于展示,不绑定任何点击行为 |
热点高级设置
序列帧动画
将精灵图 (Sprite Sheet) 配置为帧动画:
- 帧数量:精灵图横向/纵向的帧数
- 播放速度 (FPS):每秒播放帧数
- 循环模式:单次/循环/来回摆动
3D 模型热点参数
当热点类型为 3D 模型时的专属设置:
- 模型文件:上传 GLTF/GLB 格式的 3D 模型文件
- 缩放比例:调整模型在全景空间中的显示大小
- 三轴旋转 (RX/RY/RZ):分别设置模型在 X/Y/Z 轴的旋转角度
- 光源配置:为模型配置半球光照明(关联光源热点)
- 动画播放:如模型自带动画则可设置自动播放
多边形与折线配置
当热点类型为多边形或折线时:
- 顶点编辑:在全景中逐点点击添加顶点,形成闭合多边形或开放折线
- 默认/悬停边框:分别设置常态和鼠标悬停时的边框颜色、宽度
- 填充颜色:多边形内部的填充色及透明度
- 交替渐变:开启后边框颜色和宽度在两套预设值之间循环动画切换
- 轨迹动效:在路径上放置一个图标沿折线运动,可设定速度、方向和循环模式
热点分组管理
点击面板顶部的「分组」图标进入热点分组模式:
- 创建分组:按房间/楼层/功能区域等维度建立热点分组
- 分组绑定:将热点拖入对应分组
- 场景级联:设置特定分组仅在特定场景中显示
热点作用范围
点击面板顶部的「范围」图标设置热点的场景作用域:
- 全部场景生效:热点在所有场景中都显示
- 仅当前场景:热点仅在当前编辑的场景中显示
- 指定场景列表:手动勾选此热点需要显示的场景集合
批量处理
点击面板顶部的「批量处理」图标进入批量操作模式:
- 全选/反选:快速选中全部或反转选中的热点
- 批量删除:一键删除选中的多个热点
- 批量显示/隐藏:统一控制选中热点的可见性
- 批量样式修改:同时修改多个选中热点的图标、大小等样式属性