360°全景效果演示效果-QUI-Notes

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

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

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://photo-sphere-viewer.js.org/

嗖一下，答案就来了！

360°全景效果演示效果

效果展示：