HTML5+JS 可交互360°&柱状全景图浏览
时间:2022-07-28
本文章向大家介绍HTML5+JS 可交互360°&柱状全景图浏览,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
手动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, // 默认缩放值
});
这样设置的话,就无法看到照片以外的黑色区域啦,柱状全景图完成!
- 【Java提高十八】Map接口集合详解
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven
- Thinking in React
- 【Java提高十六】集合List接口详解
- JS的内建函数reduce
- Error: Cannot find module 'gulp-clone'问题的解决
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(四)代码简化
- Angular源码分析之$compile
- TensorFlow实例: 手写汉字识别
- iOS引入JavaScriptCore引擎框架(一)
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(三)搭建步骤
- iOS引入JavaScriptCore引擎框架(二)
- Java基础-03(01).总结运算符、键盘录入、if语句
- 使用git恢复未提交的误删数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP pthreads v3在centos7平台下的安装与配置操作方法
- laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
- PHP Beanstalkd消息队列的安装与使用方法实例详解
- 解决windows上php xdebug 无法调试的问题
- php7 图形用户界面GUI 开发示例
- Django开发的简易留言板案例详解
- php使用redis的有序集合zset实现延迟队列应用示例
- PHP使用openssl扩展实现加解密方法示例
- php使用redis的几种常见操作方式和用法示例
- 使用memory_profiler监测python代码运行时内存消耗方法
- php 多进程编程父进程的阻塞与非阻塞实例分析
- php数组指针函数功能及用法示例
- thinkphp5框架路由原理与用法详解
- ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
- php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)