webVR全景圖多種方案實現（pannellum，aframe，Krpano，three,jquery-vrview）

時間 2019-11-11

標籤 webvr 全景多種方案實現 pannellum aframe krpano jquery vrview 欄目 JQuery 简体版

原文原文鏈接

前言javascript

　　有一篇文章我說了H5實現全景圖預覽，全景視頻播放的原理，有須要的小夥伴能夠自行去看一下css

　　今天我就拿出個人實踐乾貨出來，本人實測實測過html

需求前端

　　老闆：我須要能夠上傳全景圖片，而後手機網站上均可以360度看全景圖java

需求分析node

　　一個上傳功能linux

　　一個全景360度預覽功能css3

正文web

　　H5 上傳功能就不說了，或下一篇文章說。算法

　　H5 有幾種方式實現呢？

第一種方案：three.js(大哥出山吧)

　　做爲前端界全景、3D大哥，大哥請開始你的表演

　　官方地址：https://threejs.org/

　　官方案例：https://threejs.org/examples/#css3d_panorama

　　源碼：簡單，引入three，引入3d

　　實現：2:1的全景在PC端，能夠預覽，左右上下鼠標移動

　　優勢：aaaaa,我說不出口

　　缺點：PC端不能放大縮小，圖片須要裁剪六張，移動端，不能放大縮小，更加糟糕的是渲染滴不好，截圖爲證，手機也是如此（此方案涼涼不符合需求）

　　大哥，就這樣跪了嗎？我沒有深刻的研究three，可能他的強大我沒有用上吧

　　剛開始我用的是，node+three 居然沒有 CSS3DRenderer 安裝包，只有2D的而且引用three 也是報各類錯誤

　　放一個我引入成功的示範：import * as THREE from "three";

　　官方實例的靜態頁面，跟官方一個效果，可是不是我想要的；我不想切六張圖，還有渲染也很差，圖中出現黑色這是咱們老闆打死也不能接受的。是我沒有深刻了解

　　本例子，不接受反駁，有能力的本身去研究。反正我是沒有這個本事

　　總之，這個我能力不夠，搞不定

　　放一下源碼：

　　貌似有點多啊~ 大家仍是去官網找吧，找不到私信一下

第二種方案：aframe

　　官方地址：https://aframe.io/

　　官方案例：https://aframe.io/examples/showcase/sky/

　　源碼：真是太簡單了，引入aframe 框架, <a-sky></a-sky>

　　實現：2:1的全景在PC端，能夠預覽，左右上下鼠標移動，還支持VR模式，

　　優勢：簡單方便，一頓操做猛於虎

　　缺點：PC端不能放大縮小，移動端只能左右移動，不能放大縮小，不能上下滑動（此方案涼涼不符合需求）

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <body>
    <a-scene>
      <a-sky src="img/po.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
    </body>
  </body>
</html>

第三種方案：jQuery 插件——vrview

　　是時候要咱們的jQuery大哥出場了，萬能的插件快來解救我吧！！！

　　嘗試了大概不下五個插件，效果都不盡人意，

　　不是打不開，就是不太符合個人需求，還有就是像素加載處理不好

　　看到這裏是否是很絕望，反正我是的（引入jQuery 代碼都不想放出來了大家本身找吧，無非就是引用插件引用圖片）

　　但願你們能夠找到符合大家需求的插件吧

　　江湖再見

第四種方案：pannellum（宛如個人救星，是國外的一個框架）

　　官方地址：https://pannellum.org/

　　官方案例：https://pannellum.org/documentation/overview/

　　源碼：引用一樣是so easy！

　　實現：2:1的全景在PC端，能夠預覽，左右上下鼠標移動，可以放大縮小，移動端也完美具有這些需求，徹底符合個人需求，跪謝

　　優勢：簡單方便，一頓操做猛於虎

　　缺點：因爲webGL的限制，圖片寬度最大限制是4086，圖片因爲燈光有點失真，更加悲劇的是放大的時候，有鋸齒（圖片裁剪算法問題）

　這都差很少了，可是新的問題好像很難啊

　　用了很渣的英文問了做者，做者告知是圖片裁剪算法問題

　　厚着臉皮要後端小哥哥，用bicubic和 Lanczos 幫我裁剪圖片

　　然而事實，在移動端有鋸齒，特別的失真（哇的哭了，老闆而後各類發移動端別人作的沒有鋸齒的網頁版全景圖）

　　這一刻，我真的絕望了

　　絕望後，我再補充一下
　　

　　我用了4096 沒有裁剪的圖，其實圖片仍是有鋸齒的（放大最大限度）怎麼表達這個鋸齒呢（像素）

　　你確定會想說放大圖片原本就有像素點啊！

　　好像這個框架圖片算法處理的不夠好（移動端），pc端很不錯

　　咱們老闆的大光頭（我仍是放圖吧）

　　emmmmmmmmmmmmmmmmmmmmmmmmmm

　　再怎麼說，代碼仍是要貼出來

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="js/pannellum.css"/>
    <script type="text/javascript" src="js/pannellum.js"></script>
    <style>
    #panorama {
        width: 100%;
        height: 100%;
    }
    *{
      margin:0;
      padding:0;
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<!-- <canvas id="canvas" style="display:none"></canvas> -->
<script>
    pannellum.viewer('panorama', {
        "type": "equirectangular",
        "panorama": url,
        "autoLoad": true,
    });
</script>

</body>
</html>

第五種方案：Krpano（大哥真的就靠你了）

　　吃完飯，冥思苦想。我仍是換一種方案吧（咱們老闆堅定不接受鋸齒）

　　啊啊啊啊啊啊~我記得Krpano 是要用工具才能夠的啊

　　據說上手很難啊~xml 寫的收費的

　　官方地址：https://krpano.com/

　　中文教程：http://www.krpano360.com/

　　實現：2:1的全景在PC端，能夠預覽，左右上下鼠標移動，可以放大縮小，移動端也完美具有這些需求，徹底符合個人需求，而且沒有鋸齒

　　跟着教程走一遍，你就知道原理了

　　而後呢，本身跑一個案例，其實很是的簡單，我以爲，以前都是謠言

　　簡單原理：準備一張全景圖，把全景圖拖入它的工具中，,生成一個文件夾，用本地服務。完美

　　開開心心到這裏，發現事情並無這麼簡單

　　這是靜態圖片的製做，我是動態圖片啊~用戶上傳的全景圖啊（我滴個乖乖）