开源全景插件 Photo Sphere Viewer

概述

日常中，我们比较常见的是街区全景，百度通过街景车采集街景数据，最后形成全景应用，百度的全景还拥有一定的交互功能，可以随着街道移动街景，作为个人开发者，有一些开源库能够满足我们对全景的应用与探索。Aframe是一个功能强大的框架，我们也可以通过它实现全景功能，Photo Sphere Viewer，一个使用Three实现的全景库，接下来，我将简析该库的使用。

入门

1. 安装

// 安装
npm install photo-sphere-viewer
// 安装依赖
npm install three.js uevent

2. html 不要忘记设置div的宽高

<div id="viewer"></div>

3. 初始化

import {
    Viewer } from 'photo-sphere-viewer';

const viewer = new Viewer({
   
  container: document.querySelector('#viewer'),
  panorama: 'test.jpg' // 图片地址
});

测试图片地址

深入使用

多张图片的全景数据

现在的全景数据有很多种，我们入门使用的便是全景数据为一整张的情况，也会有多长图片的情况，甚至是以瓦片形式的全景数据。

panorama: 'test.jpg' // 图片地址
//如果是多张可以组织一下，同样传入该属性中
// 数组写法需要注意顺序
panorama: [
  'left.jpg', 'front.jpg',
  'right.jpg', 'back.jpg',
  'top.jpg', 'bottom.jpg',
]
// 对象写法也是可以的，两者都能支持多张图片的传入
panorama: {
   
  left:   'path/to/left.jpg',  front:  'path/to/front.jpg',
  right:  'path/to/right.jpg', back:   'path/to/back.jpg',
  top:    'path/to/top.jpg',   bottom: 'path/to/bottom.jpg',
}

测试图片1组
测试图片2组

增加标记

当我们体验全景功能时，自然会想要一些交互效果，该开源库便支持此效果，它允许你在全景上用任意图标标记点位，或绘画一片区域，又或者是增加一段文字，并且可以进行点击交互。
这里贴上长代码进行解释,点击查看在线示例

var viewer = new PhotoSphereViewer.Viewer({
   
  panorama