进阶与开发者
面向有集成与定制需求的你。本篇汇总全景引擎、iframe 嵌入参数、WebXR/VR、自有域名托管与性能调优，把 720 工坊嵌进任何产品。
全景渲染引擎
720 全景工坊底层采用成熟的 WebGL 全景渲染引擎渲染等距圆柱全景。理解它有助于你更好地集成与排错：
渲染方式
基于 WebGL / HTML5，将 2:1 等距圆柱图贴合到球面，按视角实时渲染。
热点实现
热点以图片（skin）形式叠加；字体图标按类型回退为默认图片图标。
多分辨率
支持分级/瓦片加载，先清晰缩略再渐进替换高清，兼顾速度与画质。
编辑器画布是 2D HTML 覆盖标记，真实的球面透视、畸变贴图（贴墙/贴地）只在预览页、正式访问页与导出包中由全景引擎呈现。
iframe 嵌入与传感器权限
在线作品与导出包都可通过 iframe 嵌入。要让移动端的陀螺仪、重力感应与 VR 正常工作，allow 权限必须齐全：
| 属性 | 作用 |
|---|---|
allow="gyroscope" | 授权访问陀螺仪，实现设备转动查看全景。 |
allow="accelerometer" | 授权加速度计，用于重力感应自动找正。 |
allow="xr-spatial-tracking" | 授权 WebXR 空间追踪，VR 模式必需。 |
allowfullscreen | 允许进入全屏，提升沉浸感。 |
若被嵌页面处于跨域 iframe且未声明上述
allow，手机转动无反应、VR 按钮不可点是常见现象——补全权限即可解决。WebXR 与 VR 全景
引擎支持通过 WebXR 在头显（如 Quest、Vision Pro 浏览器）中打开立体全景：
- 作品需为完整 360°×180°（或 360°×360° 立体）全景，普通广角图不适合 VR。
- 访问页面必须为 HTTPS，浏览器才允许调用传感器与 WebXR。
- 在嵌入 iframe 上声明
xr-spatial-tracking，并提供进入 VR 的入口按钮。
自定义域名与静态托管
导出的 HTML/ZIP 包是纯静态资源，可托管在任意位置，并绑定你自己的域名：
1
选择托管方式
对象存储（OSS/COS/S3）、CDN、Nginx、虚拟主机或 GitHub Pages 均可，只要能提供静态文件。
2
上传整包
保持
index.html、panos/、lib/ 的相对路径不变整体上传。3
解析并绑定域名
将域名 CNAME/A 记录指向托管地址；生产环境务必配置 HTTPS 证书。
完整嵌入示例
下面是一个响应式、带传感器权限的嵌入片段，可直接放入网站；容器用 padding-bottom 维持 16:9 比例：
<!-- 响应式全景嵌入（16:9） --><div style="position:relative; width:100%; padding-bottom:56.25%; height:0;">
<iframe src="https://你的域名或作品地址"
style="position:absolute; inset:0; width:100%; height:100%; border:0;"
allow="gyroscope; accelerometer; xr-spatial-tracking"
allowfullscreen loading="lazy"></iframe>
</div>
页面内多个全景时，加
loading="lazy" 延迟加载可视区外的 iframe，可显著降低首屏压力。性能调优清单
| 方向 | 建议 |
|---|---|
| 源图体积 | 2:1 全景控制在合理分辨率（如 5760×2880），JPG 质量 80~85。 |
| 分级加载 | 优先开启缩略/瓦片渐进加载，先快后清。 |
| 懒加载 | 多全景页面用 loading="lazy" 与视口检测。 |
| CDN 加速 | 静态包放对象存储并接 CDN，就近分发大图。 |
| HTTPS | 全站 HTTPS，既是传感器/VR 前提，也利于 HTTP/2 多路复用。 |