vue与单页面 使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于：http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中，若有侵权请邮件：[email protected],我将马上更正，谢谢，大神。。。
示例效果图
前提：我本打算直接引用静态js，然后直接运行，后来一想，还是自己去npm，按照自己的理解去完成一遍，所以以下是我自己理解一点点之后，直接到vue中的记录，当然，这是我本地开发环境调试，打包之后是否有问题还没测试。
1、Photo Sphere Viewer基于 three.js,因此先安装依赖
地址：https://www.npmjs.com/package/three 或 npm i three --save-dev
2、安装依赖Photo Sphere Viewer
下载地址：https://photo-sphere-viewer.js.org/ 或 npm install [email protected] --save-dev
我的vue目录结构截图
以下分别展示对应的编码文件内容：
1、index.vue
2、script.js
var THREE = require('three');
var PhotoSphereViewer = require('photo-sphere-viewer');
export default {
name: "PSViewer",
data() {
return {
width:798,
height:498,
img:require('./images/sun.jpg'),
};
},
beforeDestory(){},
mounted(){
this.init();
},
methods: {
// photo-sphere-viewer
init:function(){
const self = this;
var PSV = new PhotoSphereViewer({
// Panorama, given in base 64
panorama: self.img,
// Container
container: self.$refs.psvdbg,
// Deactivate the animation
time_anim: false,
// Display the navigation bar
// navbar: true,
navbar:[
'autorotate',
'zoom',
'fullscreen'
],
navbar_style:{
backgroundColor:'rgba(58,67,77,0.7)'
},
// Resize the panorama
size: {
width: '100%',
height: '498px'
}
});
},
}
};
3、style.scss 基本都是图标定位(我安装依赖之后，自动生成的图标位置有问题，所以重定位了)
.PSViewer{
overflow: hidden;
display: block;
width: 100%;
height: inherit;
position: relative;
.fix{
position: fixed;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
width: 200px;
}
.psv-hud{
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 35px;
z-index: 10;
svg{
display: block;
width: 100%;
height: 100%
}
}
.psv-container{
display: block;
width: 100%;
height: inherit;
.psv-loader-container{
width: 50px;
height: 50px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -25px;
*{
max-width: 100%;
max-height: 100%;
}
}
}
.psv-canvas-container{
display: block;
width: 100%;
height: inherit;
canvas{
display: block;
width: 100%;
height: inherit;
}
}
.psv-navbar{
&.psv-navbar--open{
position: absolute;
bottom: 0;
width: 100%;
z-index: 60;
padding: 8px 0;
display: block;
background-color: rgba(255,255,255,0.7);
.psv-caption{
display: inline-block;
}
.psv-button{
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
float: left;
&.psv-zoom-button{
float: left;
width: auto;
.psv-zoom-button-minus{
width: 20px;
float: left;
height: 20px;
background-color: transparent;
line-height: 20px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.psv-zoom-button-range{
float: left;
padding: 10px 8px 0 8px;
background-color: transparent;
cursor: pointer;
.psv-zoom-button-line{
width: 50px;
height: 2px;
background-color: rgba(0, 0, 0, 0.7);
position: relative;
.psv-zoom-button-handle{
position: absolute;
top: -3px;
left: -3.5px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.7);
}
}
}
.psv-zoom-button-plus{
width: 20px;
float: left;
height: 20px;
background-color: transparent;
line-height: 20px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
}
&.psv-autorotate-button{
margin-right: 8px;
margin-left: 8px;
}
&.psv-fullscreen-button{
float:right;
margin-right: 8px;
}
}
.psv-caption{
height: inherit;
}
}
}
}
基本上复制我上面的内容就可以使用了，希望可以帮到大家，，，，【其实我是怕自己搞丢了文件，忘记了才马上写日志，尴尬！！！】
===============以下是单页面示例代码：
若是直接使用单页面方式的3d全景，可以去这里下载：http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html
反正注册账号不用收费，若是不需要资源文件，只看代码的，可以接着看我以下说的单页面示例代码（资源我不会放出来，也不用联系我，因为上面地址的哥们说了，尊重劳动成果，所以大家需要的可以去下载，体谅一下那位大哥。）：
只需要引入这些资源：
html下body内的内容
刚开始时截图
选择资源图片之后的截图
移动模式下截图
