关于全景360度照片效果估计很多人都看到不止一次,这样的效果一直被用到房地产开发商宣传房屋效果图上面,如何实现这样的效果困扰我了好久,今天终于找到了解决途径,而且没有想象中的那么困难,小白也可以根据官方API文档轻松实现这样的360全局照片预览的效果。

360°全景效果初探奥秘:photo-sphere-viewer.js,不懂JS也可以做出!-Qui-Note

下面终结一下前端静态页面如何实现360度全景照片效果:

在线体验360度入口:https://course.51qux.com/360d

1.引入JS和Css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

当然你也可以去官方下载插件到自己服务器,就不多说了!

2.配置全景参数

<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: 'viewer', //容器ID
    panorama: 'cs.jpg', //全景图地址,也可以是6张:左前、右后、上下顺序
    caption   : '全景图360度照片测试', //图片描述
    defaultLong: Math.PI/2 + Math.PI/12, // 默认角度,介于0~2π之间
    defaultLat:  0, //初始纬度,介于-π/2~π/2之间
    defaultZoomLvl: 10, //初始缩放值,默认50,介于0~100之间,
    minFov:10,//最小视野范围,默认30,介于1~179之间
    maxFov: 100,//最大视野范围,默认90,(介于1到179之间
    autorotateDelay: 200000,//自动旋转开始的延迟时间(以毫秒为单位)
    autorotateSpeed:0.1 ,//自动旋转速度,默认2rpm
    autorotateLat: 0 ,// 执行自动旋转的纬度。

    mousewheel: true ,//使用鼠标滚轮启用缩放,默认 true
    mousemove: true ,//使用鼠标光标或在触摸屏上滑动手指即可启用全景旋转,默认 true 

    //更多参数,前往官方api吧,反正很简单
  });
</script> 

我这里将常用到的参数 罗列翻译了一下,官方说的很明白,大家可以直接查看文档。。。

下面就是效果:——由于不能上传过大照片,所以看起来有点鬼畜了,建议预览在线版:https://course.51qux.com/360d

360°全景效果初探奥秘:photo-sphere-viewer.js,不懂JS也可以做出!-Qui-Note

全景图:

360°全景效果初探奥秘:photo-sphere-viewer.js,不懂JS也可以做出!-Qui-Note

官方插件地址:

https://photo-sphere-viewer.js.org/