IMAGE & MEDIA
全景 / 360° 查看器Panorama / 360° Viewer
一张超宽全景图或 360° 球面照片，拖动即可环视四周；房产、景区、车的标配。
效果预览
拖动查看四周 · 360°
⛶
常见变体
等距圆柱投影版Equirectangular Pan
用一张超宽图横向拖动，模拟水平环视；实现最简单，但无法上下看。
高清加载中… 拖动即可环视
低分辨率预览版Low-res Preview
先加载一张压缩的模糊全景占位，高清图解码完成后再切换，减少白屏等待。
适合用在哪
房产看房、景区导览、汽车内饰、博物馆展品、VR 场景。
不适合：没有全景图或只是普通宽图的页面：把普通 16:9 图片强行做成全景拖动会穿帮；同时加载大体积全景图会严重拖慢页面，网络环境差时应提供静态版。
和相近模式的区别
设备样机Device Mockup
设备模型是把产品放进 iPhone/MacBook 的壳子里展示外观；全景查看器是让用户进入产品或环境的内部环视。两者都能展示产品，但一个是外观，一个是空间体验。
拖拽滚动Drag to Scroll
拖动滚动用于横向列表或地图，拖动结束有边界；全景拖动是环视一个 360° 连续空间，没有边界，且需要横向无限循环。不要把全景图做成带吸附边界的横向滚动。
容易踩的坑
- 全景图原图几十 MB 直接加载，弱网用户等十几秒才能拖动。
- 没有低分辨率占位或渐进加载，图片出来前页面像卡住。
- 陀螺仪默认开启且未请求用户授权，iOS 会直接拒绝并留下空白。
设计提示词 · Prompt
全景 / 360° 查看器（Panorama / 360° Viewer）：容器固定高度 200-320px（桌面可更高），overflow:hidden，cursor:grab。底层用等距圆柱投影（equirectangular）全景图横向重复，通过 transform:translateX 跟随拖动；或接入 Three.js/Pannellum 做真 360° 球面映射。添加拖拽交互：mousedown 记录起点，mousemove 时按移动距离换算经度偏移，mouseup 时惯性衰减。右上角放一个「全屏」按钮。移动端支持 touch 滑动与陀螺仪（需用户授权）。加载大图时先显示低分辨率版本，避免白屏。
Panorama / 360° Viewer: a fixed-height container (200-320px, taller on desktop) with overflow:hidden and cursor:grab. For equirectangular panoramas, pan the image horizontally with transform:translateX based on drag distance; for true 360° spherical images, use Three.js or Pannellum. Implement drag: record mousedown position, update longitude offset on mousemove, and apply inertial decay on mouseup. Add a fullscreen button in the top-right. On mobile support touch drag and optional gyroscope (request permission first). Show a low-resolution preview first so the user isn't left staring at a blank area.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
.pano { position: relative; width: 100%; height: 100%; background: #0b0b10; }
.pano__view { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: grab; }
.pano__view:active { cursor: grabbing; }
.pano__view img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; transform: translateX(-25%); user-select: none; }
.pano__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; backdrop-filter: blur(4px); }
.pano__btn { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; font-size: 12px; }
.pano__placeholder { position: absolute; inset: 0; background: var(--i-gd); filter: blur(18px); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
.pano__view img { transition: none; }
}
演示 HTML 结构
<div class="s s--abs d-pano">
<div class="d-pano__view">
<span class="d-pano__hint">拖动查看四周 · 360°</span>
<span class="d-pano__btn">⛶</span>
</div>
</div>
无障碍与性能
无障碍
- 给全景容器加 aria-label="360 度全景查看器"，拖动操作建议用 role="application" 并在说明文字里提示键盘用户可用方向键微调。
- 陀螺仪功能在 iOS 13+ 必须通过 DeviceOrientationEvent.requestPermission() 请求用户授权，默认不要自动启用。
- 低视力用户可能难以在全景中定位，提供一组预设视角按钮（客厅 / 阳台 / 卧室）作为替代导航。
性能
- 全景图文件通常很大，桌面端提供 4096×2048 或更小的 WebP，移动端 2048×1024；考虑分块加载（cube map tiles）以获得更大视角。
- 拖动时避免每帧都 setState，改用 rAF 更新 transform，并把图片提升为合成层（will-change: transform 仅在拖动期间）。
- 不要用原图直接做 transform 拖动，太大的位图会占用大量 GPU 内存，先压缩或做瓦片。
常见问题
等距圆柱投影和立方体贴图有什么区别？
等距圆柱投影是一张 2:1 的矩形图，实现简单但两极会拉伸；立方体贴图把场景分成前后左右上下六张图，畸变小、更适合 Three.js 真 3D 渲染，但需要更多资源。
移动端陀螺仪为什么无法自动启用？
出于隐私和安全考虑，iOS Safari 要求用户通过按钮触发 requestPermission()；Android 也逐渐收紧自动访问陀螺仪。必须在 UI 上明确放置「开启陀螺仪」按钮。
常见搭配
同一页面里经常和「全景 / 360° 查看器」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。