Panorama——H5实现全景图片原理

前言

　　H5是怎么实现全景图片播放呢？

正文

　　全景图的基本原理即 "等距圆柱投影"，这是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式，投影后再展开就是一张 2:1 的矩形图片。

　　全景图并不是一个新概念，其实就是一种广角图（玩单反的 很懂了）

　　用 "全景播放器" 渲染全景图，可以让观看者身临其境地进入到全景图所记录的场景中。

　　微博，facebook等是支持360度查看全景图的，可以去体验一下

　　还有一个很好的例子，就比如一张展开的地图，通过等距投影到地球仪。

　　全景图的视野：人在球内中心，无论你怎么移动 都有画面，恩想象自己在球中心

 

　　

那web前端工程师，该如何实现呢？

　　那先了解一下什么是webGL？

　　WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。
　　举栗子：

<canvas  id='glcanvas'></canvas >   

<script>
    const canvas = document.querySelector("#glcanvas");
    const gl = canvas.getContext("webgl");
</script>

　　画布已经准备好了，任君大放异彩

 　　下一篇文章写实例~