0
点赞
收藏
分享

微信扫一扫

720°全景预览插件(Photo Sphere Viewer、Panolens、Pannellum、Krpano)

一、Photo Sphere Viewer

1、文档:​​https://photo-sphere-viewer.js.org/guide/​​

demo链接:​​https://pan.baidu.com/s/1UPOq17DJTCihNdmESMKMPg ​​提取码:v9n9

2、效果图

720°全景预览插件(Photo Sphere Viewer、Panolens、Pannellum、Krpano)_.net

3、示例代码

<html>
<head>
<!-- for optimal display on high DPI devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!--基础-->
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
</head>
<body>

<!--自动旋转-->
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/autorotate-plugin@5/index.js"></script>

<!--多图-->
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin@5/index.css">


<!-- the viewer container must have a defined size -->
<div id="viewer" style="width: 100%; height: 100%;"></div>

<script>
const viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'),
panorama: 'sphere.jpg',
loadingImg: 'loader.gif',
plugins: [
//自动旋转
[PhotoSphereViewer.AutorotatePlugin, {
autorotatePitch: '5deg',
}],
//多图
[PhotoSphereViewer.GalleryPlugin, {
visibleOnLoad: true,
items: [
{
id: '1',
thumbnail: 'sphere.jpg',
panorama: 'sphere.jpg',
},
{
id: '2',
thumbnail: 'key-biscayne-1-thumb.jpg',
panorama: 'key-biscayne-1.jpg',
},
{
id: '3',
thumbnail: 'logo.png',
panorama: 'logo.png',
},
],
}],
],

});
</script>
</body>
</html>

二、Panolens

1、文档:​​https://pchen66.github.io/Panolens/​​

三、Pannellum

1、文档:​​https://pannellum.org/​​​

四、Krpano

1、文档:​​https://krpano.com/home/​​

下载链接:​​https://pan.baidu.com/s/1hddSZPxlmeSIEXy_n54aWg ​​提取码:87r6

720°全景预览插件(Photo Sphere Viewer、Panolens、Pannellum、Krpano)_xml文件_02

 

make.php是注册程序

720°全景预览插件(Photo Sphere Viewer、Panolens、Pannellum、Krpano)_xml文件_03

2、效果图

720°全景预览插件(Photo Sphere Viewer、Panolens、Pannellum、Krpano)_xml文件_04

3、krpano常用设置

a、小行星开场

在tour.xml文件中找到skin_settings中设置 littleplanetintro="true"

b、自动旋转

在tour.xml文件中找到skin_settings、设置autotour="true"

再添加 <autorotate enabled="calc:skin_settings.autotour == true" waittime="3" accel="0.7" speed="4.0" tofov="80" oneroundrange="360" />

c、设置右键菜单

在tour.xml文件中添加

<contextmenu >
<item name="sa" caption="开启自转" onclick="autorotate.start();" separator="both" showif="autorotate.isrotating == false" visible="calc:skin_settings.autotour == true" />
<item name="ta" caption="关闭自转" onclick="autorotate.stop();" separator="both" showif="autorotate.isrotating == true" visible="calc:skin_settings.autotour == true" />
</contextmenu>

d、加载动画

全景漫游图片非常多,k数也不小,而默认的 viewer 只有loading…这种静态提醒,不过我们可以在官方的案例文件夹中找到loading-progress这个文件夹,将需要的文件内容复制到项目中的skin文件夹,然后在tour.xml文件中引入该文件即可,这样重新打开就可以看到有动态的进度条了。

<include url="skin/loadingbar.xml" />

e、更多效果

​​http://www.krpano360.com/category/krpano%e4%bb%a3%e7%a0%81%e4%b8%8e%e6%a1%88%e4%be%8b%e5%88%86%e4%ba%ab/%e5%ae%98%e6%96%b9%e6%a1%88%e4%be%8b%e7%a7%bb%e8%8a%b1%e6%8e%a5%e6%9c%a8/​​



举报

相关推荐

0 条评论