720全景工坊
教程与下载 / 入门指南 / 编辑器详解
第 2 篇 · 核心

编辑器详解

全景编辑器是作品的创作核心。本篇覆盖三栏界面、场景组织、10 种热点、文本浮层、动态特效、氛围粒子与滤镜、镜头巡航、图标库、视角控制、贴图畸变、所见即所得预览与发布全流程。

阅读约 20 分钟 难度:进阶 适用:已创建作品

三栏界面一览

编辑器采用经典的三栏布局:左侧管理场景、中间实时预览与拾取、右侧编辑热点、文本、动画与属性。

作品标题 · 已保存 · 设置 · 预览 · 发布 · 导出
场景列表
场景 1
场景 2(当前)
场景 3
+ 添加场景
全景视口
拖拽旋转 · 点击拾取位置 · 双击元素编辑 · 实时特效预览
热点 | 文本 | 动画
热点列表
文本列表
动态特效面板
左侧 · 场景列表
管理作品内的全部场景,添加、切换、排序,显示当前场景热点数。
中间 · 全景视口
拖动查看全景,热点与文本以标记形式叠加显示,动态特效实时播放。
右侧 · 多 Tab 面板
「热点」「文本」「动画」三个 Tab 分别管理对应元素,选中后进入属性编辑。

场景管理

场景就是一张全景图代表的空间(如客厅、卧室)。多个场景通过「场景跳转」热点串联,即构成完整漫游。

1
添加场景
在左侧点击「+ 添加」,从素材库选择或直接上传一张 2:1 全景图。
2
命名与缩略图
为场景命名(如"入户大堂"),缩略图默认取全景图,用于列表展示。
3
切换编辑
点击场景即切为"当前场景",右侧面板随之更新。
建议把第一个场景设为主入口(如大堂/门厅),并为其设置合适的初始视角——访客打开作品时看到的就是它。

添加热点的标准姿势

热点是全景上的可交互点。添加遵循"先选位置、再填内容"的两步流程:

1
进入拾取模式
点击工具栏或右侧「+ 添加」,视口出现十字准星与"点击全景图拾取热点位置"提示。
2
点选位置
在全景图上单击想要放置热点的位置,坐标会跟随视角自动计算。
3
填写属性
在弹出的属性面板选择热点类型、图标,并填写标题、内容或跳转目标。
双击视口中已有的热点标记可直接进入编辑;拾取过程中按 Esc 可取消。

10 种热点类型详解

编辑器内置 10 种热点类型,覆盖导览、信息、媒体、跳转与业务交互等全部常见场景:

场景跳转
场景跳转
点击后切换到另一个场景,是串联多空间漫游的核心热点。
图文弹窗
图文弹窗
点击弹出标题+图文说明,适合介绍某个展项或空间。
视频热点
视频热点
点击播放一段视频,用于讲解、宣传片或附加影像资料。
音频导览
音频导览
点击播放语音讲解,适合博物馆、展厅的自助导览。
图片展示
图片展示
点击放大查看细节图片,如局部特写、图纸或海报。
链接跳转
链接跳转
点击打开外部网址,用于导流到官网、商城或预约页面。
文字说明
文字说明
展示一段纯文字信息,如名称、介绍或提示语。
3D模型
3D 模型
点击展开可交互的 3D 模型查看器(支持 glTF/GLB),适合展示展品、家具等三维物体。
表单留资
表单留资
点击弹出自定义表单(字段可配置),访客填写后提交,数据落入"作品留资"供导出。适合收集预约、咨询线索。
商品卡片
商品卡片
点击弹出商品信息(图片、价格、描述、电话、链接),适合展厅中嵌入商品导购。
「表单留资」「商品卡片」为业务交互组件,需在套餐设置中开启。未开启时编辑器类型下拉不显示这两项。

文本浮层

除了热点,编辑器还支持在全景画面上叠加纯文本浮层,用于展示景点介绍、诗词文案或说明标签。文本分两种:

场景文本
绑定在特定场景上,随视角定位(球面锚定),转到该场景才显示。适合做空间标题或局部注释。
全局文本
固定在屏幕视口的某个边缘位置,不随视角旋转。适合做水印、角标或常驻说明。

文本编辑与样式

在右侧「文本」Tab 点击「+ 添加」即可新建文本。属性面板支持:

  • 内容:多行文本输入,支持回车换行(查看器中会保留换行显示,不再挤成一行)。
  • 样式:字号、颜色、背景色(可选透明/白底/黑底/自定义)、内边距。
  • 位置:场景文本通过拖拽定位;全局文本通过边缘 + 偏移量控制。
  • 尺寸:可设定宽度与高度,内容超出时自动换行。
文本内容支持回车换行——在内容输入框中按 Enter 即可分行,查看器与预览中会原样保留换行格式。

场景动态特效

动态特效是"贴"在全景画面任意位置的会动、能发声的 SVG 动画元素。内置 13 大类共 200+ 个平台自绘 SMIL 动画素材:

自然 / 室内
水花、瀑布、篝火、咖啡热气、壁炉…
科技 / 城市
全息投影、激光扫描、霓虹招牌、夜景天际线…
节庆 / 太空
烟花、迪斯科球、火箭升空、流星…
海洋 / 工业
鲸鱼喷水、水母漂浮、齿轮转动、烟囱排烟…
天气 / 奇幻
雷暴闪电、龙卷风、魔法阵、精灵星尘…
美食 / 古风 / 抽象
烧烤炭火、拉面热气、红灯笼、锦鲤池、万花筒…

核心特性

  • 球面锚定:在全景上点选位置放置,视角转动时元素紧贴画面跟随移动。
  • 水平飘移:可配置飘移速度,元素从放置点缓缓横向飘过。
  • 实时音效:Web Audio 程序化合成 18 种引擎音效(雷声、海浪、火焰噼啪、机器嗡鸣……),随元素位置自动定位立体声像。
  • 自适应降级:小屏与低配设备自动限制可见个数,保证流畅。
  • 多端一致:预览、正式查看器与离线导出包同样播放。
在右侧「动画」Tab 中按分类选项卡(胶囊式)快速浏览和选用元素,点选即添加到当前场景。

氛围粒子与画面滤镜

为每个场景独立配置全屏级别的大气效果,让画面氛围感一步到位。分三类:

氛围粒子

全屏飘动的粒子效果,数量 / 速度 / 风力 / 大小逐场景可调:

  • 飘雪、细雨、花瓣、萤火、气泡、星点、流星、红枫、彩屑 等 20+ 种预设

屏幕叠加贴图

覆盖在全景画面最上层的氛围贴图(可多选叠加):

  • 暗角、薄雾、暖阳、漏光、光斑、神光、雨窗、赛博雨夜、夜幕、胶片颗粒 等 24 种

色彩滤镜

一键改变画面色调,CSS 实时套用:

  • 黑白、复古、电影、青蓝、夜色、赛博、鲜亮、金秋 等 20+ 种
所有粒子、贴图与滤镜均为实时预览——在设置弹窗中勾选或拖动参数滑块,画面立即响应,满意再保存。

镜头巡航

镜头巡航让作品打开后自动按预设路径旋转浏览,无需手动拖动。支持两种模式:

自动旋转
单场景内水平匀速旋转,可设速度与延迟启动。适合单图展示。
关键帧巡航
跨多场景录制"航线"——在任意场景的任意视角打帧,作品打开后按顺序飞行,配合转场形成沉浸导览。

关键帧使用方式

1
打开巡航面板
右侧面板或工具栏点击「镜头巡航」入口。
2
添加关键帧
旋转到想要记录的视角,点击「+ 当前视角」即落一帧(自动记录场景、水平/垂直角度、视野范围)。
3
调整顺序与参数
拖拽排序、设置每帧停留时长与过渡速度。

内置图标库

每种热点都可自定义图标。为保证前台渲染一致,平台内置一套 PNG 图标库(共 24 个),可在属性面板直接选用:

向右箭头
向左箭头
向上箭头
向下箭头
出入口
楼层楼梯
主页入口
位置标记
信息说明
帮助问答
评论留言
文字说明
文档资料
播放视频
摄像机
拍照点位
音乐导览
音量解说
图片展示
查看预览
新窗口打开
外部链接
星标推荐
购物消费

视角与初始角度

初始视角决定访客"第一眼看到的方向",在属性面板中通过三个参数控制:

参数含义建议
水平视角 (fov/hlook)左右朝向与视野范围朝向主体景观,避免正对空白墙
垂直视角上仰下俯的角度室内略平视,突出层高可微仰
缩放/视野角画面远近(越大越广)入口用广角(大),细节用小视野
把视口旋转到满意的方向后点击"设为初始视角",即可所见即所得地定格开场画面。

贴图畸变(贴墙/贴地)

除了点状图标热点,还支持把一张图片以透视畸变(distorted)方式"贴"到墙面、地面或天花上,做成平面图、导视牌或地贴。

贴墙
保持接近水平的朝向,把图片平贴到墙面,适合海报、展板。
贴地
常用俯仰角约 rx ≈ -90,做地面导视、地贴。
贴顶
常用俯仰角约 rx ≈ 90,做吊顶、天花板标识。
重要:编辑器画布里的热点是 2D 覆盖标记,畸变的真实透视效果只在预览页、正式访问页与导出包中呈现,编辑器内看不到最终透视——请以后台预览为准反复微调 rotate / rx / ry / rz。

预览与发布

编辑器顶栏提供两个核心操作:预览(看当前效果)和发布(让改动对游客生效)。

所见即所得预览

点击顶栏「预览」按钮(或按 Ctrl+P),会在新标签页打开查看器,直接读取当前实时草稿——无需先发布即可看到最新编辑效果,包括所有热点、文本、特效与巡航设置。

预览按钮读取的是实时草稿,而正式分享链接(/viewer/{id})读取的是最近一次发布的快照。两者数据源不同——这就是"发布才生效"的隔离设计。

发布与版本管理

编辑满意后点击「发布」,系统会将当前所有设置、场景、热点、文本与特效整体打包为一个不可变版本快照,版本号自增。发布采用原子事务——要么全部成功,要么全部回滚,杜绝"半发布"异常。

  • 草稿隔离:编辑过程随时保存,但不发布就不影响线上游客所见。
  • 未发布提醒:底部状态栏会显示橙色徽章提示"存在未发布改动"。
  • 版本回滚:在「版本」页面可一键切回任意历史版本。
  • 版本对比:选择两个版本,逐字段查看新增/删除/修改。

操作技巧与快捷键

快捷键作用
Ctrl + S保存作品标题
Ctrl + P打开预览(实时草稿)
Ctrl + Z撤销上一步操作
Ctrl + Y重做
Esc取消拾取模式 / 关闭面板
Delete删除选中的热点或文本
G切换网格显示
1 - 7快速切换热点类型

实用建议

  • 自动保存:编辑过程自动落库,状态栏"已保存"表示已同步,可放心切换页面。
  • 双击元素:直接进入编辑,省去在列表里查找。
  • 先规划动线再标注:把场景画一张草图,决定跳转关系后再加热点,避免遗漏或成环。
  • 热点数量适度:单场景热点过多会显乱,聚焦关键导览点即可。
  • 善用预览:改完就 Ctrl+P 看效果,所见即所得,不用反复发布再验证。