使用three.js搭配photo sphere viewer是实现线上虚拟展厅最稳定省事的方案，无需自研球面投影或webgl，加载一张2:1等距柱状投影全景图即可运行，并支持陀螺仪、热点交互与自动宽高适配。
直接用 three.js 搭配 Photo Sphere Viewer 是当前最稳、最省事的线上虚拟展厅实现路径——不用自己写球面投影，不碰 WebGL 底层，加载一张全景图就能跑起来。
为什么不用纯 CSS/HTML 模拟 360° 展厅
CSS 的 transform: rotateX/Y 只能做伪 3D，视角固定、无法自然拖拽、不支持鱼眼校正，用户转两下就晕。真·全景浏览必须依赖球面坐标映射，浏览器原生不提供该能力，硬啃 WebGL 写 glsl 着色器成本远高于引入一个成熟库。
-
Photo Sphere Viewer内置陀螺仪支持，手机端可抬头低头看天花板 - 自动处理图片宽高比、水平/垂直偏移（
longitudeOffset/latitudeOffset） - 支持热点（
markers）挂文字说明、跳转子场景、播放音频，展览刚需全覆盖
Photo Sphere Viewer 初始化时必填的三个参数
很多人卡在白屏，其实是漏了基础校验：全景图必须是等距柱状投影（Equirectangular），宽高比严格为 2:1，且 container 元素得有明确宽高（不能靠内容撑开）。
-
panorama：必须是完整 URL 或相对路径，如"./assets/hall-360.jpg"，本地双击 HTML 会因 CORS 被拒，务必起本地服务（npx serve或 VS Code Live Server） -
container：传入 DOM 元素，不是选择器字符串，写成document.getElementById("viewer")，不是"#viewer" -
loadingImg建议显式配置，否则加载中显示空白，用户以为挂了
const viewer = new PhotoSphereViewer({
container: document.getElementById("viewer"),
panorama: "./assets/hall-360.jpg",
loadingImg: "./assets/loader.gif",
navbar: true
});
加展厅热点（markers）时最容易错的三件事
热点不是简单贴图标，位置由球面经纬度决定，手调极容易偏到墙外或地板下。
- 经度（
longitude）范围是 -180° ~ +180°，正东为 0°；纬度（latitude）是 -90° ~ +90°，赤道为 0°，抬头看天花板接近 +90° —— 别按屏幕 XY 坐标去猜 - 每个
marker的id必须唯一，重复会导致后续removeMarker(id)失效 - 点击事件绑定要写在
markers数组里，不是初始化后单独addEventListener：click: () => { alert("展柜1"); }
markers: [{
id: "case-1",
longitude: -45,
latitude: 12,
html: "<div class="psv-marker">北宋瓷枕</div>",
click: () => { /* 弹详情层 */ }
}]
全景图本身质量比代码更重要：拼接缝没修好、曝光不均、畸变残留，再好的库也救不回来。上线前一定用手机横屏实测拖拽流畅度——低端安卓机上 canvas 渲染帧率掉到 20fps 以下，人眼就会明显卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
