谈谈360度全景看图插件及制作

32160次浏览

360度全景看图

360度全景看图是流行比较久的技术了,目前除了我们利用百度地图插件,制作360度全景地图之外。市面上还有不少方法!360度全景看图让你有更好的全景体验,我们在360全景看房或者其他方面应用的最广泛!下面,我们简单的聊聊360度全景看图插件及制作。

制作软件制作

因为这项技术蛮火,因此,派生了不少软件制作商制作收费软件来实现这种全景看图,当然,这个不是我们想要的。但是,今天,我还是简单介绍几个360全景看房的软件制作商吧!

1、krpano,大家可以网上搜索,他们的软件可以制作360全景看图,目前,不少房产公司也用了这家公司的软件!但是是收费的!

2、pano2vr,这个软件也是制作360全景看图,网上也有教程和例子,感兴趣的可以去看看!(软件也是收费的。PS,我这边有软件破解版!目前还能用,不知道能用多久!)

目前我用pano2vr,简单的制作了一个360全景案例,感兴趣的可以看看!可以制作多张图片的交互,关于使用,很简单,大家可以去pano2vr官网,看下视频教程,就可以制作了!

Three.js制作

随着WebGL技术的流行和Three.js的发展,对于这种360全景看图的技术,我们可以用Three.js来实现!在我的前端资源库,中介绍了不少关于Three.js的技术。目前我也放了一个Three.js制作的360度全景图预览插件,大家可以看下。这个是我们前端人员来制作和书写的!

这个插件的用法很简单,引入如下2个js

<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>    

然后初始化一下!

var PSV = new PhotoSphereViewer({
    // Path to the panorama
    panorama: '1.jpg',

    // Container
    container: div
});    

关于这个插件的使用API,我在前端资源库中已经列举了。同时,在github上面,大家搜索(Photo Sphere Viewer),也能找到!目前这个插件感觉还不是很完善。

小结

这篇文章只是简单介绍一些关于360全景看图的方法,有更多关于360全景看图及应用和制作的朋友,关于留言交流!

Tags: html5全景

相关文章: