--- theme: fancy highlight: vs --- 有时候需要开发简单的全景图，在上面打几个交互点而已，不想引入three.js这大家伙，这时你一定要用谷歌的Marzipano！ # 1.全景图全景图就是一种广角图，可以360度查看，感觉就像是身临其境的感觉，经常用于虚拟旅游、3D看房、地图街景等。 ![20230520\_094745.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e51d5444f7ea485783ed39d444d6f871~tplv-k3u1fbpfcp-watermark.image?) # 2.Marzipano * 基于Webgl技术的轻量级全景图展示器，性能绝佳 * 支持html和css创建交互 * 支持所有主要的桌面浏览器和移动设备。 * 可显示任何尺寸的全景图，支持球体（等矩形）和立方体格式 > 官网地址：`https://www.marzipano.net/` > github地址：`https://github.com/google/marzipano` > API文档地址：`https://www.marzipano.net/reference/` # 3.开启全景图的漫游之旅官方单立方体全景图示例:`https://www.marzipano.net/demos/cube-single-res/` ## 1）安装使用 ```html npm install marzipano import Marzipano from 'marzipano'; var viewer = new Marzipano.Viewer(document.getElementById('pano')); ``` > 注意：需配置viewport，避免渲染错误 ```html ``` ## 2）创建图源 ```js var source = Marzipano.ImageUrlSource.fromString( "//www.marzipano.net/media/cubemap/{f}.jpg" ); ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a4af1439e89436091915f038dcfcb25~tplv-k3u1fbpfcp-watermark.image?) > 立方体图源说明：f前，b后，u上，d下，l左，r右 ## 3）创建立方体视图 ```js //创建形状 var geometry = new Marzipano.CubeGeometry([{ tileSize: 1024, size: 1024 }]); //矩形视图限制 traditional(立方面大小, 最大垂直视角, 最大横向视角（可选）) var limiter = Marzipano.RectilinearView.limit.traditional(4096, 100*Math.PI/180); //创建视图 var view = new Marzipano.RectilinearView(null, limiter); ``` ## 4）初始化场景 ```js // 创建场景 var scene = viewer.createScene({ source: source,//图源 geometry: geometry,//形状 view: view,//视图 pinFirstLevel: true }); // 展示场景 scene.switchTo(); ``` ![20230520\_101745.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c30661f8c424e67a08f8910ab466e4c~tplv-k3u1fbpfcp-watermark.image?) ## 5）equirectangular等距圆柱体格式 ![angra.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e120e25945d41b1bde4a89e6eea34e0~tplv-k3u1fbpfcp-watermark.image?) ```js //创建图源 var source = Marzipano.ImageUrlSource.fromString( "//www.marzipano.net/media/equirect/angra.jpg" ); //创建等圆柱体形状 var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]); //创建视图 var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180); //RectilinearView(初始化视角,视图限制) var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter); ``` ![20230520\_103003.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a71dbc4ef834b74ac219f15d335db57~tplv-k3u1fbpfcp-watermark.image?) ## 6）控制视角 > 视角说明： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/688fae6fdd4a40b2bc2213cedc72c85b~tplv-k3u1fbpfcp-watermark.image?) * yaw：围绕 y 轴旋转，偏航角，默认0 * pitch：围绕 x 轴旋转，俯仰角，默认0 * roll：围绕 z 轴旋转，翻滚角，默认0 * fov：视场角，视野范围角度，默认45度，数值越大，看到的场景范围越大 > 获取视角 ```js var yaw = view.yaw();//偏航角 var pitch = view.pitch();//俯仰角 var fov = view.fov(); // 横向视场角 var vfov = view.vfov();//横向视场角 var hfov = view.hfov(); //纵向视场角 ``` > 设置视角 ```js //方法1，设置目标视角，让场景看向对应的角度 var destinationViewParameters = { yaw: 10 * Math.PI/180, pitch: 15 * Math.PI/180, fov: 60 * Math.PI/180 }; var options = { transitionDuration: 2000 } scene.lookTo(destinationViewParameters, options); //方法2 view.setYaw(45 * Math.PI/180); view.setPitch(30 * Math.PI/180); view.setFov(60 * Math.PI/180); //方法3 view.setParameters({ yaw: 45 * Math.PI/180, pitch: 30 * Math.PI/180, fov: 60 * Math.PI/180 }); //方法4,相对于当前视角的偏移 view.offsetYaw(10 * Math.PI/180); view.offsetPitch(10 * Math.PI/180); view.offsetFov(10 * Math.PI/180); ``` ## 7）添加交互点 * 交互点样式，需设置禁止浏览器默认行为 ```css .interface { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; -ms-content-zooming: none; } //dom样式 #hotspot { background-color: rgba(0, 0, 0, 0.5); border-radius: 4px; } #hotspot .detail { white-space: pre-wrap; word-wrap: break-word; } #hotspot .header { border-bottom: solid 1px white; } #hotspot > .info-box { width: 160px; display: none; color: white; font-size: 16px; line-height: 32px; padding: 0 10px; } #hotspot:hover > .info-icon { display: none; } #hotspot:hover > .info-box { display: block; } ``` * 交互点html ```html

Marzipano,Marzipano,Marzipano,Marzipano,Marzipano,Marzipano

``` * 添加交互点 ```js //交互点位置 var position = { yaw: Math.PI / 4, pitch: 0, fov: Math.PI / 8 }; var element = document.getElementById('hotspot'); //添加到场景中 scene.hotspotContainer().createHotspot(element, position); ``` > 交互点位置，位置是基于视角的，转到什么视角就能看到该交互点 ![20230520\_114535.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6d62154cb284621a8d3eb6f6fd4857a~tplv-k3u1fbpfcp-watermark.image?) ## 8）切换全景图 ```js function switchScene1() { //初始化新全景图... scene.switchTo(); var switchImage = document.createElement('img'); switchImage.src = 'link.png'; //全景图添加交互点进行切换场景交互 scene.hotspotContainer().createHotspot(switchImage, position); //添加交互动作 switchImage.onclick = (ev) => { switchScene2(); }; } ``` ![20230520\_121249.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79c62c24336148e38c0db8b6a74d237a~tplv-k3u1fbpfcp-watermark.image?) > 分别在两个场景中添加对应的场景切换点就可以进行场景之间的切换，如果是连续的全景图就可以做成移步换景的感觉了 # 总结 Marzipano全景图真的轻量又好用，它还能实现里再嵌套的视频地图，多层全景图叠加等功能，挺厉害的！我这里只是简单介绍了常用的部分，更高级的功能请到官网上仔细研究，示例很多，讲得都特别详细！