线上云展厅搭建与嵌入
本文讲通用搭建与嵌入思路；具体平台功能、iframe 策略与浏览器兼容性以厂商资料和实际环境为准。
全景漫游做好了，甲方问：“能不能放到我们官网首页？公众号也想挂一个，展厅入口还想放块屏循环播。“——这时候”内容做没做好”已经翻篇，接下来的活儿是把这个全景漫游变成能到处打开、随处能嵌的云展厅。听起来只是”贴个链接”，实际里头藏着嵌入方式、移动端适配、加载性能一堆坑。这篇讲清楚怎么把云展厅稳稳地搭起来、嵌进去、跑得动。
不清楚全景漫游是什么的，先看VR 全景与 720° 云展厅是什么；内容怎么采集制作的，看全景漫游内容采集与制作。
云展厅到底”搭”在哪
做好的全景漫游本质是一套网页文件（HTML + 全景图 + 配置），它要有个”住的地方”才能被访问。常见几种：
- 托管在制作平台上：用第三方全景平台制作的，通常直接生成一个平台域名下的链接和二维码，最省事，开箱即用。缺点是链接带平台域名、长期依赖平台、想深度定制受限。
- 导出后放自己服务器：把成品导出为一套静态文件，传到自己的服务器或对象存储（OSS/CDN），用自己的域名访问。好处是完全自主、域名可控、可长期保存、便于嵌进官网同域；需要一点服务器/运维能力。
- 随内容管理系统一起部署：并入企业官网的部署体系，作为官网的一个子页面存在。
判断依据：要快、不折腾 → 平台托管；要自主可控、并入官网、长期资产 → 导出放自己服务器 + CDN。对外长期做门面的，建议走自有域名，显得正式也不受制于人。
iframe 嵌入官网怎么做
把云展厅嵌进已有官网页面，最通用的方式是 iframe——相当于在页面里开一个”窗口”，里面加载全景漫游那个网址。要点：
- 给 iframe 明确的宽高：全景漫游需要足够的显示区域，桌面端常见做法是宽度撑满容器、高度设一个合适值（如占屏一大半），或做成点击进入全屏。高度给太小观众转起来憋屈。
- 自适应容器：宽度用百分比撑满父容器，高度用视口比例或响应式手段，让它在不同屏幕上都合理。
- 允许全屏与传感器权限：全景漫游常需要全屏按钮和（移动端）陀螺仪，iframe 要放开全屏和相应设备权限，否则观众点全屏没反应、手机转动画面不跟着转。
- 跨域与安全策略：嵌入的网址如果和官网不同域，注意对方是否允许被 iframe 嵌入（有的站点设了禁止嵌入策略）。自有导出的、放同域下最省心。
一个典型的嵌入片段就是在页面里放一个指向全景网址的 iframe，设好宽高、开放全屏和陀螺仪权限。具体代码平台一般会直接生成，你复制粘贴即可，重点是核对上面几条。
嵌进微信公众号
公众号里挂云展厅，路子和官网不太一样：
- 图文里放链接/按钮：最简单是在推文里放一个”进入云展厅”的超链接或卡片，观众点了在微信内置浏览器打开。
- 自定义菜单挂链接：把云展厅网址配到公众号底部菜单某一项，用户点菜单直接进。
- 注意微信内置浏览器的限制：微信里打开有它自己的规矩，某些自动播放、全屏行为受限，务必在微信里实测一遍，别只在系统浏览器测好就发。
移动端适配是重灾区
云展厅一大半观众是在手机上看的，移动端适配没做好，前面拍得再好也白搭：
- 触摸操作：手指滑动转视角、双指缩放，要顺滑不卡顿。发布前真机划一划。
- 陀螺仪模式：开启后手机怎么转画面怎么转，很有沉浸感，但要给一个开关让观众能关掉（有人会晕、有人在地铁上不方便转手机）。
- 竖屏适配：手机多是竖着拿，画面和热点在竖屏下要摆得下、点得着，别让按钮跑到屏幕外。
- 全屏按钮：手机屏小，给一个显眼的全屏入口，让观众能沉浸看。
加载性能：别让观众等到白屏就走
全景图是大图，一个云展厅几十个点位，素材体积可观。加载慢、白屏、卡顿是移动端最常见的劝退点，优化手段：
- 首屏优先、其余懒加载：先把第一个点位加载出来让观众能动，其余点位在后台或跳转时再加载，别一上来把几十张全景全下下来。
- 分辨率分级：给移动端提供适当压缩的版本，别把上大屏用的超高清原图直接怼给手机，观众流量和耐心都耗不起。
- 上 CDN 加速：素材放 CDN，让观众就近取，比从单台源服务器拉快得多。
- 压缩图片格式：用高压缩比的现代图片格式，在画质和体积间取平衡。
- 加载动画兜底：加载过程给个进度或转圈提示，别让观众对着白屏以为坏了。
移动端白屏/卡顿排查：白屏很久 → 素材太大 + 没懒加载 + 没上 CDN，按上面四条优化；转动卡顿掉帧 → 全景图分辨率过高或设备性能弱，降分辨率或分级加载；点热点没反应 → 触摸区域太小或脚本没加载完，放大热点、确认资源加载完成；全屏/陀螺仪没反应 → iframe 权限没放开，回去检查嵌入时的权限设置。
分享与数据统计
云展厅做出来是要传播和看效果的，别漏了这两件：
- 分享物料：生成二维码放展会物料、名片、实体展厅入口；配好分享到微信时的标题、缩略图，别分享出去是一串裸链接。
- 访问统计：接入统计工具，看有多少人打开、在哪个点位停留久、从哪进来。这些数据能反过来指导下次优化——冷清的点位是不是没必要、热门展品是不是该加更多图文。
小结
把全景漫游变成云展厅，核心是三件事：找对托管方式（要自主可控就导出放自有域名 + CDN）、嵌得进去（iframe 设好宽高、开放全屏和陀螺仪权限、注意跨域和微信内置浏览器限制）、跑得动（移动端触摸/陀螺仪/竖屏适配，首屏优先 + 懒加载 + CDN + 分辨率分级压住加载性能）。最后配好二维码分享和访问统计，让云展厅既传得开又看得见效果。选型阶段还有哪些坑要提前避，见全景漫游选型与避坑。
线下实体展厅也想放全景漫游、宣传片在多块屏上循环播放并集中排期？了解 SoftPlayer 网络可控播放器，支持全景/漫游内容多屏播控，也可以直接说说现场需求，我们帮你定制方案、聊聊对接。