首页 1 2 3 4 5 6 7

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内的内容

       // Load a panorama stored on the user's computer
       function upload() {
           // Retrieve the chosen file and create the FileReader object
           var file = document.getElementById('pano').files[0];
           var reader = new FileReader();

           reader.onload = function() {
       initVr(document.getElementById('your-pano'),reader.result)
           };

reader.readAsDataURL(file);
}

       function initVr(div,imgurl){
           var PSV = new PhotoSphereViewer({
               // Panorama, given in base 64
               panorama: imgurl,

// Container
container: div,

// Deactivate the animation
time_anim: false,

// Display the navigation bar
navbar: true,

               // Resize the panorama
               size: {
                   width: '100%',
                   height: '400px'
               }
           });
       }
   </script>

刚开始时截图

选择资源图片之后的截图

移动模式下截图

vue与单页面 使用Photo Sphere Viewer创建vr 360全景示例代码

vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码