vue+photo-sphere-viewer.js 渲染全景图片

photo-sphere-viewer.js是一个基于three.js的全景插件。只需要提供一张全景图，便可以带你进入沉浸式体验。话不多上，来个简单案例：

1.创建一个vue项目

2.安装photo-sphere-viewer依赖

npm install photo-sphere-viewer

3.创建容器

<div class="showCanvas" id="viewer">

4.引入 photo-sphere-viewer 和相关样式

import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

5.进行渲染

  mounted() {new Viewer({container: document.querySelector('#viewer'),panorama: require('./assets/test.jpg'),size: {width: '100vw',height: '100vh'}})}

全部代码：

<template><div class="showCanvas" id="viewer"></div>
</template><script>
import { Viewer } from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
export default {data() {return {}},mounted() {new Viewer({container: document.querySelector('#viewer'),panorama: require('./assets/test.jpg'),size: {width: '100vw',height: '100vh'}})}
}
</script><style>
* {padding: 0;margin: 0;
}
</style>

效果演示：

未来属于那些相信梦想,并愿意为之付诸行动的人！