编辑器详解
全景编辑器是作品的创作核心。本篇覆盖三栏界面、场景组织、10 种热点、文本浮层、动态特效、氛围粒子与滤镜、镜头巡航、图标库、视角控制、贴图畸变、所见即所得预览与发布全流程。
三栏界面一览
编辑器采用经典的三栏布局:左侧管理场景、中间实时预览与拾取、右侧编辑热点、文本、动画与属性。
拖拽旋转 · 点击拾取位置 · 双击元素编辑 · 实时特效预览
场景管理
场景就是一张全景图代表的空间(如客厅、卧室)。多个场景通过「场景跳转」热点串联,即构成完整漫游。
添加热点的标准姿势
热点是全景上的可交互点。添加遵循"先选位置、再填内容"的两步流程:
Esc 可取消。10 种热点类型详解
编辑器内置 10 种热点类型,覆盖导览、信息、媒体、跳转与业务交互等全部常见场景:
文本浮层
除了热点,编辑器还支持在全景画面上叠加纯文本浮层,用于展示景点介绍、诗词文案或说明标签。文本分两种:
文本编辑与样式
在右侧「文本」Tab 点击「+ 添加」即可新建文本。属性面板支持:
- 内容:多行文本输入,支持回车换行(查看器中会保留换行显示,不再挤成一行)。
- 样式:字号、颜色、背景色(可选透明/白底/黑底/自定义)、内边距。
- 位置:场景文本通过拖拽定位;全局文本通过边缘 + 偏移量控制。
- 尺寸:可设定宽度与高度,内容超出时自动换行。
Enter 即可分行,查看器与预览中会原样保留换行格式。场景动态特效
动态特效是"贴"在全景画面任意位置的会动、能发声的 SVG 动画元素。内置 13 大类共 200+ 个平台自绘 SMIL 动画素材:
核心特性
- 球面锚定:在全景上点选位置放置,视角转动时元素紧贴画面跟随移动。
- 水平飘移:可配置飘移速度,元素从放置点缓缓横向飘过。
- 实时音效:Web Audio 程序化合成 18 种引擎音效(雷声、海浪、火焰噼啪、机器嗡鸣……),随元素位置自动定位立体声像。
- 自适应降级:小屏与低配设备自动限制可见个数,保证流畅。
- 多端一致:预览、正式查看器与离线导出包同样播放。
氛围粒子与画面滤镜
为每个场景独立配置全屏级别的大气效果,让画面氛围感一步到位。分三类:
氛围粒子
全屏飘动的粒子效果,数量 / 速度 / 风力 / 大小逐场景可调:
- 飘雪、细雨、花瓣、萤火、气泡、星点、流星、红枫、彩屑 等 20+ 种预设
屏幕叠加贴图
覆盖在全景画面最上层的氛围贴图(可多选叠加):
- 暗角、薄雾、暖阳、漏光、光斑、神光、雨窗、赛博雨夜、夜幕、胶片颗粒 等 24 种
色彩滤镜
一键改变画面色调,CSS 实时套用:
- 黑白、复古、电影、青蓝、夜色、赛博、鲜亮、金秋 等 20+ 种
镜头巡航
镜头巡航让作品打开后自动按预设路径旋转浏览,无需手动拖动。支持两种模式:
关键帧使用方式
内置图标库
每种热点都可自定义图标。为保证前台渲染一致,平台内置一套 PNG 图标库(共 24 个),可在属性面板直接选用:
视角与初始角度
初始视角决定访客"第一眼看到的方向",在属性面板中通过三个参数控制:
| 参数 | 含义 | 建议 |
|---|---|---|
| 水平视角 (fov/hlook) | 左右朝向与视野范围 | 朝向主体景观,避免正对空白墙 |
| 垂直视角 | 上仰下俯的角度 | 室内略平视,突出层高可微仰 |
| 缩放/视野角 | 画面远近(越大越广) | 入口用广角(大),细节用小视野 |
贴图畸变(贴墙/贴地)
除了点状图标热点,还支持把一张图片以透视畸变(distorted)方式"贴"到墙面、地面或天花上,做成平面图、导视牌或地贴。
rx ≈ -90,做地面导视、地贴。rx ≈ 90,做吊顶、天花板标识。预览与发布
编辑器顶栏提供两个核心操作:预览(看当前效果)和发布(让改动对游客生效)。
所见即所得预览
点击顶栏「预览」按钮(或按 Ctrl+P),会在新标签页打开查看器,直接读取当前实时草稿——无需先发布即可看到最新编辑效果,包括所有热点、文本、特效与巡航设置。
/viewer/{id})读取的是最近一次发布的快照。两者数据源不同——这就是"发布才生效"的隔离设计。发布与版本管理
编辑满意后点击「发布」,系统会将当前所有设置、场景、热点、文本与特效整体打包为一个不可变版本快照,版本号自增。发布采用原子事务——要么全部成功,要么全部回滚,杜绝"半发布"异常。
- 草稿隔离:编辑过程随时保存,但不发布就不影响线上游客所见。
- 未发布提醒:底部状态栏会显示橙色徽章提示"存在未发布改动"。
- 版本回滚:在「版本」页面可一键切回任意历史版本。
- 版本对比:选择两个版本,逐字段查看新增/删除/修改。
操作技巧与快捷键
| 快捷键 | 作用 |
|---|---|
Ctrl + S | 保存作品标题 |
Ctrl + P | 打开预览(实时草稿) |
Ctrl + Z | 撤销上一步操作 |
Ctrl + Y | 重做 |
Esc | 取消拾取模式 / 关闭面板 |
Delete | 删除选中的热点或文本 |
G | 切换网格显示 |
1 - 7 | 快速切换热点类型 |
实用建议
- 自动保存:编辑过程自动落库,状态栏"已保存"表示已同步,可放心切换页面。
- 双击元素:直接进入编辑,省去在列表里查找。
- 先规划动线再标注:把场景画一张草图,决定跳转关系后再加热点,避免遗漏或成环。
- 热点数量适度:单场景热点过多会显乱,聚焦关键导览点即可。
- 善用预览:改完就
Ctrl+P看效果,所见即所得,不用反复发布再验证。
