素材来源：第三方公开技术资料汇编｜文中授权价格、版本特性、插件数量等均为外部信息，未经各厂商官方核验，仅供参考；关于 krpano 为郑和博物馆底层技术的表述为外部推测，未经 720 云官方确认
承接上文《技术进阶：VR全景开发技术路线解析》，本文在四大主流方案框架对比的基础上，进一步深入核心开发技术：Photo-Sphere-Viewer 的插件生态与深度定制、krpano 的 XML 开发体系与授权模式、A-Frame 的声明式 WebVR/AR 构建、Pannellum 的轻量级嵌入用法，并在文末给出四条技术路线的落地建议。
一、技术选型速查对比
| 方案 | 授权模式 | 核心开发语言 | 插件/扩展生态 | 典型项目规模 |
|---|---|---|---|---|
| Photo-Sphere-Viewer | MIT（免费） | TypeScript + Three.js | 17+ 官方插件，社区活跃 | 中小型 Web 应用 |
| krpano | 商业授权（€299 起） | XML + JavaScript | 官方 + 第三方插件丰富 | 大型商业项目 |
| A-Frame | MIT（免费） | HTML + JavaScript | 社区组件生态 | VR/AR 体验项目 |
| Pannellum | MIT（免费） | JavaScript | 轻量，需自行扩展 | 轻量嵌入场景 |
注：krpano 授权价格（€299 起）为外部资料引用，未经官方核验，实际以官方报价为准。
二、Photo-Sphere-Viewer：插件生态与深度定制
PSV 采用 TypeScript + SASS + Three.js 技术栈，v5 版本将核心查看器与 17 个适配器/插件拆分为独立 npm 包。其插件体系是深度定制的核心入口。
1. 自定义插件开发
官方推荐方式为继承 AbstractPlugin 类创建 ES6 插件：
import { AbstractPlugin } from '@photo-sphere-viewer/core';
export class MyCustomPlugin extends AbstractPlugin {
constructor(viewer: Viewer) {
super(viewer);
// 插件初始化逻辑
}
}插件可挂载到 Viewer 实例上，通过 viewer.getPlugin() 调用。
2. MarkersPlugin 深度应用
MarkersPlugin 是 PSV 最核心的插件，让全景图从"能看"变成"能交互"：
- 标记类型：支持图片图钉、HTML 弹窗、嵌入场景的 3D 视频层；
- Tooltip 气泡：标记支持悬浮提示；
- 聚焦功能：通过获取标记物的
textureX和textureY坐标，调用viewer.rotate()实现点击标记自动聚焦； - 拖拽扩展：可继承 MarkersPlugin 增加拖拽功能。
3. 虚拟漫游与全景切换
通过 Virtual Tour 插件可实现场景间平滑过渡。依赖安装后，通过配置场景节点和过渡动画，即可实现类似郑和博物馆的多场景漫游体验。
4. 框架集成
- Vue 集成：在 Vue 项目中安装
@photo-sphere-viewer/core及插件包即可快速集成； - React 集成：社区有
react-photo-sphere-viewer封装组件； - 多分辨率瓦片：
EquirectangularTilesAdapter支持高分辨率全景图的分块加载。
三、krpano：商业化全景开发的标准答案
krpano 是郑和博物馆 VR 项目底层最可能采用的技术引擎（外部推测，未经官方核验）。其核心开发围绕 XML 配置 + JavaScript 交互展开。
1. 授权与成本
krpano 采用分级授权模式：
| 授权类型 | 价格（外部资料） | 说明 |
|---|---|---|
| 个人非商用 | 免费 | 有水印 |
| Branding Free License | €299 | 去除版权水印 |
| 版本升级（1.22+） | €39 | 距上次购买超 1 年 |
| 旧版本升级 | €89 | 更早版本 |
去除 krpano 右键菜单的版权信息需要购买 €299 的 Branding Free License。授权基于项目部署数量、商业用途强度及分发范围分级。
2. XML 开发体系
krpano 的核心开发在 XML 配置文件中完成：
- 热点系统：通过
<hotspot>标签定义交互区域，支持鼠标悬停、点击等事件。热点可用于载入其他全景、链接超链接、改变视角等； - 雪碧图动画：krpano 1.19 起弃用 GIF，推荐雪碧图（Sprite Sheet）+ 动态帧索引方案，通过 XML action 编程实时计算并切换
crop属性（裁剪区域）的偏移值驱动视觉变化； - Three.js 集成：krpano 1.22 开始支持使用 Three.js 实现高级 3D 效果，而非仅用经典的多段线热点。
3. 动态热点素材
动态热点需要序列图（Sprite Sheet），要求帧的水平和垂直位置必须精确，否则动画错乱。krpano 不支持 GIF 动态图，需通过雪碧图实现动画效果。
4. JS 交互
通过 onready 回调返回 krpano 接口对象，实现 JavaScript 与 krpano 的双向交互：
- 获取当前视角中心坐标；
- 动态加载场景；
- 控制视频热点播放；
- 全屏 / 键盘 / 鼠标控制。
四、A-Frame：WebVR/AR 的声明式方案
A-Frame 由 Mozilla 开源社区推出，基于 HTML + 实体组件系统（ECS），无需编写复杂 JavaScript 即可构建可交互 VR 场景。
1. 全景场景搭建
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<a-scene>
<a-assets>
<img id="pano1" src="scene1.jpg">
<img id="pano2" src="scene2.jpg">
</a-assets>
<a-sky src="#pano1"></a-sky>
<a-camera></a-camera>
</a-scene><a-sky> 将全景图贴在球体内侧。通过切换 src 属性实现场景切换。
2. 复杂场景构建
aframe-extras 提供了导航、控制器、模型和交互的集成方案，用于构建复杂的交互式 VR 环境。
3. WebXR 支持
A-Frame 原生支持 WebXR 标准，可在 Oculus Rift、Gear VR、HTC Vive 等设备上运行，适合需要 VR 设备兼容的项目。
4. 适用场景
- VR/AR 体验项目；
- 360° 媒体查看器；
- 沉浸式科技展示。
五、Pannellum：轻量级嵌入的进阶用法
Pannellum 仅 21kB，拥有独立 WebGL 渲染器，不依赖 Three.js。
1. 配置方式
Pannellum 提供三种配置方式：
- JavaScript 对象配置：初始化时传入配置对象；
- JSON 配置文件：结构化定义全景视图、属性及交互元素；
- URL 参数：通过 iframe 嵌入时传递参数。
2. API 方法
初始化后可通过 pannellum.viewer() 返回的实例进行程序化控制：
setPose(yaw, pitch)：设置视角；render()：重新渲染；isLoading()：检查加载状态；getCanvas()：获取画布。
3. 高级功能实现
- 多视角切换：通过 API 动态控制视角参数，实现类似 Google 街景的体验；
- 多全景图展示：支持多查看器方案或单查看器动态切换场景；
- 动态多分辨率瓦片：通过将
path参数配置为对象，实现动态 URL 映射。
4. 适用场景
中小规模展示、快速集成、对体积敏感的项目。
六、全景开发的技术路线建议
路线一：Photo-Sphere-Viewer（推荐 Web 应用）
项目初始化 → 安装 core + 插件 → 配置 Viewer → 添加 MarkersPlugin 实现标注 → 集成 VirtualTour 实现漫游 → 自定义插件扩展。
适合需要丰富交互、开源免费、TypeScript 生态的 Web 全景项目。
路线二：krpano（推荐商业项目）
购买授权 → 准备全景图（krpano Tools 切片）→ 编写 tour.xml 配置场景 → 添加热点 → 编写 action 实现交互 → 集成 JS API → 部署。
适合大型商业项目、虚拟旅游、房地产看房等对稳定性和功能全面性要求高的场景。
路线三：A-Frame（推荐 VR 体验）
引入 aframe.min.js → 搭建场景 → 添加全景图 → 使用 aframe-extras 扩展交互 → 部署 WebXR 体验。
适合需要 VR 设备兼容、沉浸式体验的项目。
路线四：Pannellum（推荐轻量嵌入）
引入 pannellum.js/css → 创建容器 → 初始化 viewer → 通过 API 控制视角/切换场景。
适合博客嵌入、产品展示、对加载速度敏感的场景。
注：外部资料推测，郑和博物馆 VR 全景项目底层技术栈可能为 krpano 引擎（文中对其 XML 开发体系与授权模式的解析基于该推测展开），720 云官方未公开具体技术细节，该推测未经官方核验。如拟复现类似项目，建议结合团队技术能力与预算，在上文四条路线中选择合适方案。
声明：本文为第三方公开技术资料汇编，授权价格（€299/€39/€89 等）、版本特性、插件数量等信息均为外部信息，未经各厂商官方核验，不构成选型承诺；代码示例仅为示意，请以各框架官方文档为准。