Web VR全景框架

塔林大学的学校介绍做的非常漂亮。 链接

1. 介绍

全景图就是720度图片，跟我们用相机平移照出来的全景是不一样，我们相机平移是照出来的360图片，而我们说的720图片是包含天地的，也就是上下的视角。

全景图可以用专业相机， 或者无人机拍摄

720全景图，可以用在 智慧园区, BI大屏幕 等

主要框架

• Photo Sphere Viewer photo-sphere-viewer.js.org/

开源、免费，API丰富， 下面主要使用Photo Sphere Viewer

• KrPano krpano.com/

KrPano的功能更强大， 部分要收费

• Pannellum pannellum.org/

Pannellum 是一款轻量级、免费且开源

2. 安装

npm install @photo-sphere-viewer/core

样式表引入 @photo-sphere-viewer/core/index.css 根据您的工具以首选方式导入。

3.使用

简单DEMO， 可以根据业务添加空间标记、移动等

3.1. Photo Sphere Viewer DEMO

import {  onMounted } from 'vue'
import { Viewer } from '@photo-sphere-viewer/core';

const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

onMounted(() => {
  new Viewer({
    container: document.querySelector('#viewer'),
    panorama: baseUrl + 'sphere.jpg',
    caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
    loadingImg: baseUrl + 'loader.gif',
    touchmoveTwoFingers: true,
    mousewheelCtrlKey: true,
  });
})

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

@import '@photo-sphere-viewer/core/index.css';
#viewer{
  height: 500px;
  width: 630px;
}

3.2. Pannellum DEMO