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>

　　畫布已經准備好了，任君大放異彩

 　　下一篇文章寫實例~