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>
画布已经准备好了,任君大放异彩
下一篇文章写实例~
FannieGirl原创文章,想了解更多前端内容,关注我的博客园
https://www.cnblogs.com/ifannie/
转载务必声明出处哦~~~~更多操作,扣我