zoukankan      html  css  js  c++  java
  • 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>

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

       下一篇文章写实例~

      

  • 相关阅读:
    316. 去除重复字母
    331. 验证二叉树的前序序列化
    225. 用队列实现栈
    197. 上升的温度
    178. 分数排名
    177. 第N高的薪水
    小程序导航
    css3、js动画特效
    背景透明css
    h5新标签IE8不兼容怎么办?
  • 原文地址:https://www.cnblogs.com/ifannie/p/9910736.html
Copyright © 2011-2022 走看看