推荐选用Pannellum或Three.js：Pannellum适合静态全景图与简单跳转，Three.js适合需户型联动、3D叠加及动画的复杂场景；数据须为等距柱状投影或立方体贴图，配合JSON配置与懒加载；交互需平滑动画、多端手势适配及历史视角回退；需对接业务系统并做好降级兼容。
开发一个全景图看房应用，核心是用 WebGL 渲染球面/立方体贴图，并通过鼠标、触摸或陀螺仪控制视角。实际项目中不推荐从零写渲染器，而是基于成熟库快速搭建，重点放在交互逻辑、数据组织和业务适配上。
选对底层库：Pannellum 或 Three.js？
Pannellum 轻量、开箱即用，适合静态全景图+简单热点跳转；Three.js 灵活度高，支持动态加载、3D 模型叠加、光照模拟，适合需要户型标注、VR 导航或动画过渡的看房场景。
- 若只需展示 360° 静态图片（JPG/PNG），且要快速上线，用 Pannellum：引入 JS/CSS，一行代码初始化，配置 hot spots 关联房间跳转即可
- 若需支持多层户型图联动、点击家具弹详情、路径漫游或接入 BIM 数据，选 Three.js + equirectangular loader，配合 OrbitControls 实现拖拽缩放
- 移动端必须加 DeviceOrientationControls（Three.js）或启用 Pannellum 的 gyroscope 支持，否则横屏体验差
全景图数据怎么准备和加载？
不是所有“全景图”都可用。前端能直接加载的只有等距柱状投影（equirectangular）图或立方体展开图（6 张正方形）。拍摄时就要按规范输出，后端提供统一 URL 结构。
- 每套房源对应一个 JSON 配置：包含主全景图地址、相邻房间 hot spot 坐标（yaw/pitch）、标题、缩略图、是否允许缩放等
- 用 懒加载策略：只加载当前房间全景图，切换时预加载目标图，避免首屏卡顿
- 大图（>5MB）必须压缩：WebP 格式比 JPG 小 30%，配合
decode()API 控制解码时机，防止主线程阻塞
交互细节决定用户体验
看房不是炫技，用户要的是“像在现场走动”。光有拖拽不够，得模拟真实空间逻辑。
立即学习“Java免费学习笔记（深入）”；
- hot spot 点击跳转时，加 300ms 平滑旋转动画（Pannellum 的
lookAt或 Three.js 的Tween），避免突兀视角切换 - 鼠标滚轮默认控制 zoom，但移动端双指缩放更自然——用 hammer.js 统一处理多点手势，映射到 same zoom logic
- 加“返回上一视角”按钮，记录历史 yaw/pitch 栈；用户迷路时一键回退，比反复拖拽友好得多
- 键盘支持（←→↑↓）对看房经纪人很重要，尤其外接显示器演示时，用
keydown监听并调用视图调整方法
怎么对接房产系统和埋点？
全景应用最终要融入业务流。不能独立存在，得和房源列表、预约组件、用户行为分析打通。
- URL 中带
?room=bedroom1参数，页面初始化时自动定位到对应房间，方便分享直达 - 每个 hot spot 点击触发自定义事件（如
spot:click），上层监听后上报埋点：房间 ID、停留时长、跳转路径 - 与 CRM 系统打通：用户在客厅点击“预约带看”，自动带入当前房源 ID 和坐标，生成工单
- 导出全景图链接时，自动附加 UTM 参数，便于追踪推广渠道效果
不复杂但容易忽略：全景图加载失败要有 fallback 图+重试按钮；iOS Safari 对 WebP 支持不稳定，需降级为 JPG；首次进入提示“上下滑动看天花板/地板”，降低学习成本。
