H5使用photo-sphere-viewer.js实现360°全景
2024-04-12 18:16:00
官方网站：https://photo-sphere-viewer.js.org/
线上demo：点击查看
需要引入的文件
<link rel="stylesheet" href="./css/photo-sphere-viewer.min.css">
<!-- 3D -->
<script src="./js/three.min.js"></script>
<!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
<script src="./js/polyfill.js"></script>
<!-- 事件发射器库，它为javascript对象提供观察者模式 -->
<script src="./js/uevent.min.js"></script>
<!-- 模板引擎 -->
<script src="./js/doT.min.js"></script>
<!-- 阻止睡眠 -->
<script src="./js/NoSleep.js"></script>
<!-- 处理手机陀螺仪方向 -->
<script src="./js/DeviceOrientationControls.js"></script>
<!-- 双屏渲染 -->
<script src="./js/StereoEffect.js"></script>
<!-- 全景图插件 -->
<script src="./js/photo-sphere-viewer.js"></script>创建一个div
<!-- 全景图 -->
<div id="photo-sphere"><div id="viewer"></div>
</div>
调用PhotoSphereViewer方法
<script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'path/to/panorama.jpg',size:{width:'100%',height:'100%'}});
</script>
写下面这些代码就可以加载全景图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;padding: 0;}#photo-sphere {width: 80%;height: 500px;margin: 100px auto;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);}</style><link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script>
</head>
<body>
<!-- 全景图 -->
<div id="photo-sphere"><div id="viewer"></div>
</div>
<script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'img/3.jpg',size:{width:'100%',height:'100%'}});</script>
</body>
</html>
完整代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>PhotoSphereViewer - equirectangular demo</title><link rel="stylesheet" href="./css/photo-sphere-viewer.min.css"><style>html, body {width: 100%;height: 100%;overflow: hidden;margin: 0;padding: 0;}#photosphere {width: 100%;height: 100%;}.psv-button.custom-button {font-size: 22px;line-height: 20px;}.demo-label {color: white;font-size: 20px;font-family: Helvetica, sans-serif;text-align: center;padding: 5px;border: 1px solid white;background: rgba(0,0,0,0.4);}</style>
</head>
<body><div id="photosphere"></div><!-- 3D -->
<script src="./js/three.min.js"></script>
<!-- js语言修补匠，可向后兼容，适用于低版本浏览器 -->
<script src="./js/polyfill.js"></script>
<!-- 事件发射器库，它为javascript对象提供观察者模式 -->
<script src="./js/uevent.min.js"></script>
<!-- 模板引擎 -->
<script src="./js/doT.min.js"></script>
<!-- 阻止睡眠 -->
<script src="./js/NoSleep.js"></script>
<!-- 处理手机陀螺仪方向 -->
<script src="./js/DeviceOrientationControls.js"></script>
<!-- 双屏渲染 -->
<script src="./js/StereoEffect.js"></script>
<!-- 全景图插件 -->
<script src="./js/photo-sphere-viewer.js"></script><!-- 用于标记说明的文字 -->
<script type="text/template" id="pin-content"><h1>来自HTML的礼物</h1><p><strong>说明文字1</strong> senectus et netus et malesuada fames ac turpis egestas.Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestassemper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapienullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <ahref="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><h2>Header Level 2</h2><ol><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li></ol><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquetcongue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellusest malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote><h3>Header Level 3</h3><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li></ul><img src="assets/pin2.png" style="width:100%"/><pre><code>
#header h1 a {display: block;width: 300px;height: 80px;
}
</code></pre>
</script><!-- 用于多边形标记的图案 -->
<svg id="patterns"><defs><pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/></pattern><pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/></pattern></defs>
</svg><script>var panos = [{url: 'Bryce-Canyon-National-Park-Mark-Doliner.jpg',desc: 'Bryce Canyon National Park <b>© Mark Doliner</b>',target: {longitude: 3.848,latitude: -0.244,zoom: 50}}, {url: 'Bryce-Canyon-By-Jess-Beauchemin.jpg',desc: 'Bryce Canyon National Park <b>© Jess Beauchemin</b>',target: {longitude: 3.715,latitude: 0.574,zoom: 50}}];var PSV = new PhotoSphereViewer({container: 'photosphere', //必选，放置全景图的容器panorama: panos[0].url, //必选，全景图的路径caption: panos[0].desc, //描述loading_img: 'assets/photosphere-logo.gif', //加载文件时的图片路径longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8], //经度范围latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4], //维度范围anim_speed: '-2rpm', //旋转速度default_fov: 50, //初始视野，最小视野和最大视野之间fisheye: true, //使用true启用鱼眼效果或指定效果强度（true=1.0）此模式可能会对标记渲染产生副作用。move_speed: 1.1, //移动速度time_anim: false, //全景图自动开始旋转之前的空闲时间（毫秒）。禁用为False。
// touchmove_two_fingers: true, //需要两个手指来旋转全景。这允许在包含查看器的页面中进行标准的触摸滚动导航。如果启用，当仅检测到一次触摸时，将显示要求用户使用两个手指的覆盖。
// mousemove_hover: true, //旋转全景只需移动光标，以查看是否需要点击+移动。navbar: [ //导航栏是一个数组，它可以包含以下核心按钮：自动旋转、缩放、下载、标记、陀螺仪、立体声、全屏，以及用于创建自定义按钮的标题和对象'autorotate', 'zoom', 'download', 'markers',{title: 'Change image', //按钮的名字className: 'custom-button', //添加到button元素的CSS类content: '
H5使用photo-sphere-viewer.js实现360°全景相关推荐
- vue与单页面 使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
- Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的 该js插件可以360度旋转查看全景图,也可以上 ...
- Photo Sphere Viewer渲染全景图片
下载 官方网站: ---- https://photo-sphere-viewer.js.org 附属依赖必选项: ---- three.js ---- browser.js 注: 可以直接使用 np ...
- 开源全景插件 Photo Sphere Viewer
概述 日常中,我们比较常见的是街区全景,百度通过街景车采集街景数据,最后形成全景应用,百度的全景还拥有一定的交互功能,可以随着街道移动街景,作为个人开发者,有一些开源库能够满足我们对全景的应用与探索. ...
- Photo Sphere Viewer
Photo Sphere Viewer photo-sphere-viewer中文文档_陈坚泓的博客-CSDN博客_photo-sphere-viewer
- Three.js制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
- 使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...
- 全景效果实现（Photo Sphere，photo-sphere-viewer全景虚拟漫游）
简述:全景效果我们都知道,常用于虚拟场景体验,具体怎么实现,这里给大家推荐一款组件,便于实现全景的真实效果,Photo Sphere: 使用详细: 1.下载依赖: npm install photo- ...
- viewer.js插件简单使用说明
不需要依赖jQuery.js,只需要导入viewer.js和viewer.css文件即可. 插件GitHub地址:https://github.com/fengyuanchen/viewerjs 示例 ...
- 360全景交互式三维模型panolens.js 实现
本文主要介绍在全景图中进行三维模型交互式操作,主要步骤如下: 1,加载核心js代码库 <script src="js/three.min.js"></script ...
最新文章
- 1008c语言答案,c语言大作业题目01008.doc
- cmake find_package 中，include_directories，target_link_libraries 的值怎么知道？
- Python-条件控制及循环
- 船长英语题库测试软件,船长英语新题库题(资料).pdf
- 【BZOJ3530】数数（AC自动机，动态规划）
- 前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)
- 电脑运行内存不足怎么办_win7内存不足怎么办？教你使用虚拟内存来增加win7系统的运行内存...
- 遥感基础编程语言——IDL的应用
- vue中使用vue-baidu-map 实现点 弹窗 路线 行政区划分
- java实现qq登录界面_java实现简单的QQ登录界面
- 21.手绘Spring IOC运行时序图
- 提供linux下的新世纪五笔的码表和字根口诀，用于ibus。
- js reduce 累加数组里对象某个属性的和 NaN
- Spring配置方式
- ECCV 2022｜文本图像分析领域再起波澜，波士顿大学联合MIT和谷歌提出全新多模态新闻数据集NewsStories
- JDK11 API 帮助文档下载【中文版】
- Exp10 Final 类CTF（Webug3.0漏洞靶场—渗透基础）
- 工地发生工伤事故鉴定是由谁负责
- 蓝桥杯 高精度加法 c++实现
- HDLBits: 在线学习 SystemVerilog（十七）-Problem 106-114（移位寄存器）
热门文章