HTML5+JS 可交互360°&柱状全景图浏览

RD.Timon

发布于 2020-10-26 11:04:24

2.6K0

发布于 2020-10-26 11:04:24

手动canvas是不可能的，我选择调库hhhh，Photo Sphere Viewer。看官方示例，还是非常易用的，就是有其他的一些依赖包需要自己找一下。

<link rel="stylesheet" href="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.css">

<script src="three.js/three.min.js"></script>
<script src="D.js/lib/D.min.js"></script>
<script src="uevent/uevent.min.js"></script>
<script src="doT/doT.min.js"></script>
<script src="Photo-Sphere-Viewer/dist/photo-sphere-viewer.min.js"></script>

<script>
  var viewer = PhotoSphereViewer({
    container: 'container-id',
    panorama: 'path/to/panorama.jpg'
  });
</script>

找到一张全景图素材。

根据官方示例的代码修改一下即可实现全景浏览的功能。

柱状全景图

但我写这篇文章并不只是为了推荐一个库，还有我刚趟过的一个坑——如何实现柱状全景图。

通常，全景图片都是用专门仪器拍摄的几乎360° x 180°照片。但我们日常生活中用手机和相机横向水平拍摄的照片大概只有180° x 90°的样子，如果拍两张拼接起来可以达到约360° x 90°，但还是看不到天和地这样的全景照片放到上面的例子中是会被纵向严重拉伸的。真正的全景照片的宽高比应该是2:1

这种照片无法制作360°全景，但是可以退而求其次做个柱状全景图。例如下面这张图↓

开头推荐的库中并没有给出柱状全景图的解决方案，但是我们可以对图像做一点特殊的处理以实现目标效果。

首先，用PS编辑图片，给图片上下各加一段等高的黑色横条，使得整张图片高度达到宽度的一半

我手头这张图片原本宽度接近2W像素，为了不给浏览器造成过大负担我进行了一些缩放。最终加上黑条后整体分辨率为5000*2500。

处理后的图片放进上面的例子中终于不会变形了，但用户还可以控制镜头上下摆动，看到黑色区域不好看，怎么办？

只要调整一下viewer的默认配置latitude_range就行啦例如↓

var viewer = PhotoSphereViewer({
        container: 'container',
        panorama: 'z3d.jpg',
        latitude_range: [0, 0], // 禁止上下摆动
        mousewheel: false, // 禁止鼠标滚轮缩放
        max_fov: 68, // 最大缩放值
        min_fov: 67, // 最小缩放值（不能设为68，否则一片漆黑）
        default_fov: 68, // 默认缩放值
    });

这样设置的话，就无法看到照片以外的黑色区域啦，柱状全景图完成！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020年7月4日，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas