【亲测免费】 Photo-Sphere-Viewer 教程

1. 项目目录结构及介绍

以下是 Photo-Sphere-Viewer 的主要目录结构：

.
├── build              // 构建输出目录
├── docs                // 文档相关文件
├── examples            // 示例代码
├── packages            // 包含库本身和其他依赖
├── .editorconfig       // 编辑器配置
├── .eslintrc.js        // ESLint 配置
├── .gitignore          // Git 忽略文件列表
├── .prettierignore     // Prettier 忽略文件列表
├── .prettierrc.json    // Prettier 配置
├── .stylelintrc.json   // Stylelint 配置
├── CODE_OF_CONDUCT.md  // 行为准则
├── LICENSE             // 许可证文件
├── README.md           // 项目说明文档
├── package.json        // 项目包配置
├── tsconfig.json       // TypeScript 配置
├── turbo.json          // 不清楚具体用途的文件
├── typedoc.json        // TypeDoc 配置
└── yarn.lock           // Yarn 依赖锁定文件

• build: 构建后产出的资源文件
• docs: 文档相关内容
• examples: 提供示例代码以展示如何使用库
• packages: 库的核心代码以及其他相关的包
• .editorconfig, .eslintrc.js, .prettierrc.json, .stylelintrc.json: 代码风格和质量保证配置
• CODE_OF_CONDUCT.md: 社区行为准则
• LICENSE: 使用 MIT 许可证
• README.md: 项目简介
• package.json: 项目元数据和依赖管理
• tsconfig.json: TypeScript 配置
• turbo.json: 可能是用于构建优化的配置
• typedoc.json: TypeDoc 配置，用于生成 TypeScript 类型的文档
• yarn.lock: 使用 Yarn 管理依赖时的版本锁定文件

2. 项目启动文件介绍

由于 Photo-Sphere-Viewer 是一个 JavaScript 图像查看库，它通常通过引入其核心模块在 HTML 文件中使用。典型的启动过程包括以下几个步骤：

1. 在 HTML 文件中添加对库的引用：

<script src="path/to/photo-sphere-viewer.min.js"></script>

或者如果你是从 CDN 引入：

<script src="https://unpkg.com/photo-sphere-viewer"></script>

2. 创建 PhotoSphereViewer 实例：

var viewer = new PhotoSphereViewer({
  container: 'your-container-id', // 容器ID
  panorama: 'path/to/panorama.jpg', // 球形全景图路径
});

在这个例子中，container 参数指定在页面中放置视图器的容器元素 ID，panorama 指定要显示的全景图片。

3. 项目的配置文件介绍

Photo-Sphere-Viewer 的配置可以非常详细，以下是一些主要选项：

• container: (必需) 全景图像将在哪个 DOM 元素内渲染。
• panorama: (必需) 球形全景图的 URL 或数据。
• longitude: 初始视角经度，范围是 -180 到 180。
• latitude: 初始视角纬度，范围是 -90 到 90。
• FOV: 视场角度，默认是 90。
• min FOV: 最小视场角度，默认是 30。
• max FOV: 最大视场角度，默认是 120。
• gamma correction: 是否开启伽马校正，默认关闭。
• mouse wheel: 是否允许使用鼠标滚轮改变视场角度，默认开启。
• navbar: 自定义或关闭导航栏组件，可以是布尔值或对象来定制内容。

更多配置项以及详细的参数说明可以在项目文档（如 docs 目录下的文档）或 README.md 中找到。在实际应用中，你可以根据需求调整这些选项，创建个性化的全景图像查看体验。