Pannellum：实例之通过全景图游览

使用添加hotSpots参数并对其设置,可以对全景图片添加热点.

效果:游览

代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author"content=“KaiSarH,huankai7@163.com”><title>Custom controls</title><link rel="stylesheet" href="pannellum.css"/><script type="text/javascript" src="pannellum.js"></script><style>#panorama {width: 1200px;height: 800px;}</style>
</head>
<body><div id="panorama"></div>
<script>pannellum.viewer('panorama', {"default": {"firstScene": "circle","author": "KaiSarH",// 设置切换持续时间"sceneFadeDuration": 3000},"scenes": {"circle": {"title": "Mason Circle","hfov": 110,"pitch": -3,"yaw": 117,"type": "equirectangular","panorama": "test/test.jpg","hotSpots": [{"pitch": -2.1,"yaw": 132.9,"type": "scene","text": "Spring House or Dairy","sceneId": "house"}]},"house": {"title": "Spring House or Dairy","hfov": 110,"yaw": 5,"type": "equirectangular","panorama": "test/test1.png","hotSpots": [{"pitch": -0.6,"yaw": 37.1,"type": "scene","text": "Mason Circle","sceneId": "circle","targetYaw": -23,"targetPitch": 2}]}}});
</script>
</body>
</html>

总结:

classList.add增加class
appendChild向节点的子节点列表的末尾添加新的子节点
createElement() 方法通过指定名称创建一个元素

Pannellum：实例之通过全景图游览相关推荐

前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录特征云原生应用程序 Spring Cloud上下文:应用程序上下文服务引导应用程序上下文应用程序上下文层次结构改变Bootstrap的位置Properties ...
四大游览器兼容问题综合实例
转载地址:http://www.css-js.com/thread-161-1-1.html DIV CSS设计时IE6.IE7.FF 与兼容性有关的特性2008-03-28 14:21在网站设计的时 ...
全球最大的3D数据集公开了！标记好的10800张全景图
你一定不想错过这个全球较大的公开3D数据集. 本文作者为Matt Bell,是3D扫描解决方案提供商Matterport的联合创始人.首席战略官.在本文中,Bell亲述Matterport公开的这个数 ...
java调用第三方的webservice应用实例
互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示. 一些常用的webservice网站的链接地址: ...
消息轨迹全景图详解-独门秘籍
简介: 消息轨迹全景图详解-独门秘籍消息轨迹全景图详解-独门秘籍消息轨迹全景图详解-独门秘籍阿里云 IoT 企业物联网平台上线了消息轨迹全景图功能,帮助 IoT 开发者追踪消息通信的完整轨迹,快 ...
云原生全景图之六 | 托管 Kubernetes 和 PaaS 解决什么问题
作者 | Catherine Paganini.Jason Morgan 来源 | K8sMeetup 头图 | 下载于视觉中国在本系列之前的文章中,我们讨论了 CNCF 云原生全景图的各层:供应层 ...
三探云原生全景图，这次聊聊运行时层
在<俯瞰云原生,这便是供应层>我们介绍了云原生全景图的最底层:供应层,本文将带大家了解运行时层,这一层包含了容器在云原生环境中运行所需的一切. 作者 | Catherine Paganin ...
2021 云原生开门红，金山云发布全新云原生全景图
据云原生计算基金会(CNCF)数据显示,当前企业已经在广泛使用云原生技术,容器应用已成常态, 2019 年 84% 的公司在生产中使用容器,而 2016 年仅为 3%.据阿里达摩院最新2021年科技趋 ...
unity捕捉全景图_DronePan：可捕捉飞机全景的应用程序
unity捕捉全景图开源消费者无人机时代已经来临. DronePan是一款基于移动设备的DJI无人机自动驾驶应用程序,可自动执行为球形全景拍摄航空影像的过程. 用户将飞机驾驶到所需的全景位置,然后启 ...

Pannellum：实例之通过全景图游览

Pannellum：实例之通过全景图游览相关推荐

最新文章

热门文章