web三维全景--Pannellum在vue中的使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
web三维全景--Pannellum在vue中的使用
下载Pannellum的js和css文件
下载地址: Pannellum官网.
（也可以直接引入网址，不需要下载）
在index.htnl页面引入css文件
<link rel="stylesheet" href="<%= BASE_URL %>css/pannellum.css">
在需要加载Pannellum的组件中动态引入script
loadMainJScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js/pannellum.js';
document.body.appendChild(script);
script.onload = () => {
this.init();
}
},
初始化Pannellum
init(){
this.vr = pannellum.viewer('vrBox', {
"type": "equirectangular", // 全景展示图片方式（基本全景图配置）
//"panorama": "img/27f75e791e1c7f88a1419e92429bd9e0.jpg", // 全景展示图片的资源
"panorama": "img/vr.jpg", // 全景展示图片的资源
// "autoLoad": true, // 自动播放全景图
// "autoRotateInactivityDelay":2000,// 点击屏幕后，两秒没有交互的话继续旋转
// "autoRotate": -20,// 每秒顺时针旋转两度
"preview": "img/27f75e791e1c7f88a1419e92429bd9e0.jpg", // 未点击进入全景预览前的展示图片
"title": "武汉知会",// 左下角会出现标题
"author": "xxx", // 左下角会出现作者名字
"compass": true,// 添加指南针
"northOffset": 300,// 指定北偏移量
// 在3d视角内以屏幕的方式展示图片，类似于vr影院中的电影屏幕
// "haov": 160.87, //初始化水平
// "vaov": 54.15, // 垂直视角。
// "vOffset": 1.17, //初始垂直偏移角
// 随着haov不断减小，相当于图片被不断压缩(如果图片可以再长一点，应该会更明显)，一屏所能展示的内容不断增多；
// 随着haov不断增大，相当于图片被不断拉伸，一屏所能展示的内容不断减少。
// voac是同理的，是不过改成了垂直方向。
// vOffset：屏幕展示的形状，值越大越像个扇子
// "hotSpotDebug": true,
"hotSpots": [
{
"pitch": 14.1, // X轴（左耳到右耳）旋转（正数往上，负数往下）
"yaw": 1.5, // y轴（从脚到头）旋转
"type": "info", // 热点类型
"text": "天花板", // 划入文字
//"URL": "https://www.baidu.com" // 点击跳转
},
{
"pitch": -9.4,
"yaw": 222.6,
"type": "info",
"text": "椅子"
},
{
"pitch": -0.9,
"yaw": 144.4,
"type": "info",
"text": "天空"
}
]
// pitch是围绕X轴旋转
// yaw是围绕Y轴旋转
// roll是围绕Z轴旋转（从眼睛到后脑勺）
});
}
记得在data中注册vr属性
data(){
return {
vr : null,
}
},
html中创建div作为容器
<div id="vrBox"> </div>
添加自定义控件
<div id="vrBox">
<div id="controls">
<div class="ctrl" @click="vr.setPitch(vr.getPitch() + 10)">▲</div>// 上移
<div class="ctrl" @click="vr.setPitch(vr.getPitch() - 10)">▼</div>//下移
<div class="ctrl" @click="vr.setYaw(vr.getYaw() - 10)">◀</div>//左移
<div class="ctrl" @click="vr.setYaw(vr.getYaw() + 10)">▶</div>//右移
<div class="ctrl" @click="vr.setHfov(vr.getHfov() - 10)">+</div>//放大
<div class="ctrl" @click="vr.setHfov(vr.getHfov() + 10)">−</div>//缩小
<div class="ctrl" @click="vr.toggleFullscreen()">⤢</div>//全屏
</div>
</div>
组合实现多场景浏览切换功能
this.vr = pannellum.viewer('vrBox', {
//在default属性中,设置共有的属性、初始全景图、切换持续(虚化)时间等
//初始全景图通过: “firstScene”: “circle” 设置 （初次进入的场景）
// 持续时间(虚化)通过: “sceneFadeDuration”: 3000 设置,单位为毫秒
"default": {
"firstScene": "damen",
"author": "xxx",
// 设置切换持续时间
"sceneFadeDuration": 1000,
"autoLoad": true,
},
"scenes": {
"damen": {
"title": "大门",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/damen.jpg",
//hotSpots 以全景为坐标系的固定点，可以设置链接跳转和点击事件，也可以跳转到不同的场景，该属性的值为对象，该对象有几个常用的配置项：
"hotSpots": [
{
// pitch、yaw、roll 定位参数
"pitch": -20,
"yaw": -360,
"type": "scene", // 切换热点类型
"text": "前台", // 显示的文本内容
"sceneId": "qiantai" // 切换到的下一个场景,当"type" = "scene"时使用
}
]
},
"qiantai": {
"title": "前台",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": "img/qiantai.jpg",
"hotSpots": [
{
"hfov": 150,
"pitch": -6,
"yaw": 360,
"type": "scene",
"text": "拐角",
"sceneId": "guaijiao",
"targetYaw": 360, // 返回的图片旋转角度
"targetPitch": 2 // 返回的图片旋转角度
},
{
"hfov": 150,
"pitch": -20,
"yaw": 100,
"type": "scene",
"text": "大门",
"sceneId": "damen",
"targetYaw": 360, // 返回的图片旋转角度
"targetPitch": 2 // 返回的图片旋转角度
}
]
},
"guaijiao": {
"title": "拐角",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/guaijiao.jpg",
"hotSpots": [
{
"pitch": -20,
"yaw": -360,
"type": "scene", // 切换热点类型
"text": "办公区", // 显示的文本内容
"sceneId": "bangonqu" // 切换到的下一个场景,当"type" = "scene"时使用
},
{
"pitch": -6,
"yaw": -450,
"type": "scene", // 切换热点类型
"text": "前台", // 显示的文本内容
"sceneId": "qiantai" // 切换到的下一个场景,当"type" = "scene"时使用
},
{
"pitch": -20,
"yaw": -300,
"type": "scene", // 切换热点类型
"text": "会议室", // 显示的文本内容
"sceneId": "huiyishi" // 切换到的下一个场景,当"type" = "scene"时使用
}
]
},
"bangonqu": {
"title": "办公区",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/bangonqu.jpg",
"hotSpots": [
{
"pitch": -10,
"yaw": -200,
"type": "scene", // 切换热点类型
"text": "拐角", // 显示的文本内容
"sceneId": "guaijiao" // 切换到的下一个场景,当"type" = "scene"时使用
},
{
"pitch": -10,
"yaw": -400,
"type": "scene", // 切换热点类型
"text": "招待间", // 显示的文本内容
"sceneId": "zhaodaijian" // 切换到的下一个场景,当"type" = "scene"时使用
},
{
"pitch": 1,
"yaw": -337,
"type": "scene", // 切换热点类型
"text": "窗户", // 显示的文本内容
"sceneId": "chuanghu" // 切换到的下一个场景,当"type" = "scene"时使用
},
{
"pitch": -5,
"yaw": -440,
"type": "scene", // 切换热点类型
"text": "销售部", // 显示的文本内容
"sceneId": "xiaoshoubu" // 切换到的下一个场景,当"type" = "scene"时使用
}
]
},
"huiyishi": {
"title": "会议室",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/huiyishi.jpg",
"hotSpots": [
{
// pitch、yaw、roll 定位参数
"pitch": -20,
"yaw": -260,
"type": "scene", // 切换热点类型
"text": "拐角", // 显示的文本内容
"sceneId": "guaijiao" // 切换到的下一个场景,当"type" = "scene"时使用
},
]
},
"xiaoshoubu": {
"title": "销售部",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/xiaoshoubu.jpg",
"hotSpots": [
{
// pitch、yaw、roll 定位参数
"pitch": -10,
"yaw": -80,
"type": "scene", // 切换热点类型
"text": "办公区", // 显示的文本内容
"sceneId": "bangonqu" // 切换到的下一个场景,当"type" = "scene"时使用
},
]
},
"chuanghu": {
"title": "窗户",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/chuanghu.jpg",
"hotSpots": [
{
// pitch、yaw、roll 定位参数
"pitch": -20,
"yaw": -170,
"type": "scene", // 切换热点类型
"text": "办公区", // 显示的文本内容
"sceneId": "bangonqu" // 切换到的下一个场景,当"type" = "scene"时使用
},
]
},
"zhaodaijian": {
"title": "招待间",
"hfov": 150,
"pitch": 2,
"yaw": 360,
"type": "equirectangular",
"panorama": "img/zhaodaijian.jpg",
"hotSpots": [
{
// pitch、yaw、roll 定位参数
"pitch": -20,
"yaw": -190,
"type": "scene", // 切换热点类型
"text": "办公区", // 显示的文本内容
"sceneId": "bangonqu" // 切换到的下一个场景,当"type" = "scene"时使用
},
]
},
}
});
}
示例
链接: 示例
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)