基于three.js 全景图片或视频开源库Photo Sphere Viewer

Photo Sphere Viewer 是一个基于 JavaScript 的开源库，专门用于在网页上展示 360° 全景图片或视频。它提供了丰富的交互功能，允许用户通过鼠标、触摸屏或陀螺仪来浏览全景内容，适用于旅游、房地产、虚拟现实、教育等多个领域。

主要特点

1. 多种全景格式支持
   • 支持等距圆柱投影（equirectangular）和立方体贴图（cubemap）格式的全景图片。
   • 支持 360° 视频播放。

1. 交互功能
   • 用户可以通过鼠标拖动、触摸屏手势或陀螺仪来旋转、缩放全景内容。
   • 支持自动旋转、全屏模式、导航条等常用功能。
2. 标记与热点
   • 可以在全景图中添加标记（markers）、信息窗口（info boxes）或热点（hotspots），增强交互性。
3. 插件系统
   • 通过插件扩展功能，例如添加地图、虚拟导游、全景切片等。
4. 跨平台兼容性
   • 支持所有现代浏览器，包括桌面和移动设备。
5. 轻量级与高性能
   • 基于 WebGL 或 Three.js 实现高效渲染，确保流畅的用户体验。

使用场景

• 旅游行业：展示目的地的全景图片，让用户身临其境地感受景点之美。
• 房地产：提供沉浸式房屋浏览体验，增加销售吸引力。
• 虚拟现实（VR）：作为展示 360° 环境的基础库，为用户提供沉浸式体验。
• 教育：创建互动式的地理或历史课程，激发学生兴趣。
• 艺术与设计：展示 360° 艺术作品或设计方案。

基本使用方法

优势

注意事项

总结

Photo Sphere Viewer 是一个功能强大且易于使用的全景展示库，适合需要展示 360° 内容的项目。无论是个人开发者还是企业用户，都可以通过它快速实现沉浸式的全景体验。

• 安装
• 可以通过 npm 或直接引入 CDN 的方式安装： 

npm install @photo-sphere-viewer/core

• 初始化

• 在 HTML 中创建一个容器元素，然后通过 JavaScript 初始化 Photo Sphere Viewer： 

<div id="viewer" style="width: 100%; height: 500px;"></div>
<script>import { Viewer } from '@photo-sphere-viewer/core';const viewer = new Viewer({container: document.querySelector('#viewer'),panorama: 'path/to/your/panorama.jpg', // 全景图路径defaultZoomLvl: 0,minFov: 30,maxFov: 90,navbar: true, // 显示导航条});
</script>

• • 添加标记

    可以通过插件添加标记： 

import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
viewer.addPlugin([new MarkersPlugin({markers: [{id: 'marker-1',longitude: Math.PI / 4, // 经度latitude: Math.PI / 6,  // 纬度image: '/path/to/marker.png',width: 32,height: 32,tooltip: '这是一个标记',},],}),
]);

开源免费：Photo Sphere Viewer 是开源的，可以免费使用并自定义。
高度可定制：通过丰富的配置选项和插件系统，可以满足各种需求。
社区支持：拥有活跃的社区和详细的文档，方便开发者学习和解决问题。
图片格式：确保全景图片是等距圆柱投影或立方体贴图格式。
性能优化：对于高分辨率全景图，建议进行适当的压缩或分片加载，以提高加载速度。
移动端适配：在移动设备上测试交互效果，确保触摸手势正常工作。