Qui-Note官网Logo
导航:Qui-Note/360°全景效果演示效果

360°全景效果演示效果

关于全景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/

效果展示:

本站打赏榜

X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 9.90
ku5151 赞助了 陈小知 9.90
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90