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

图片资料来源于：http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中，若有侵权请邮件：903832827@qq.com,我将马上更正，谢谢，大神。。。

示例效果图

前提：我本打算直接引用静态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 photo-sphere-viewer@3.5.1 --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] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的该js插件可以360度旋转查看全景图,也可以上 ...
Photo Sphere Viewer渲染全景图片
下载官方网站: ---- https://photo-sphere-viewer.js.org 附属依赖必选项: ---- three.js ---- browser.js 注: 可以直接使用 np ...
Photo Sphere Viewer
Photo Sphere Viewer photo-sphere-viewer中文文档_陈坚泓的博客-CSDN博客_photo-sphere-viewer
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
开源全景插件 Photo Sphere Viewer
概述日常中,我们比较常见的是街区全景,百度通过街景车采集街景数据,最后形成全景应用,百度的全景还拥有一定的交互功能,可以随着街道移动街景,作为个人开发者,有一些开源库能够满足我们对全景的应用与探索. ...
vue多单页面多tab_vue-cli3创建多页面项目
开发了很多个单页面的项目,也开发了很多原生的项目,就是一直没机会开发多页面和单页面混合的项目,于是自己去查了一些资料,用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo. 首先,vu ...
表单展示界示例_联系表单页面设计的12个最佳实践（包括示例）
表单展示界示例 Do you want to improve your contact form page design? A good contact form page design encour ...
vue的介绍及基本使用（详细，好理解，示例代码）
下面是对Vue的介绍和对Vue的基本使用,希望可以帮助到有需要的小伙伴~ 文章目录 VUE介绍 Vue:渐进式JavaScript框架 Vue的基本使用 Vue的基本使用步骤 VUE介绍 Vue是一套 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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