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

本文轉載自查看原文 2018-11-06 19:43 19205 aframe/ webGL/ 全景圖/ pannellum/ JQuery/ webVR/ javascript/ Krpano

前言

　　有一篇文章我說了H5實現全景圖預覽，全景視頻播放的原理，有需要的小伙伴可以自行去看一下

　　今天我就拿出我的實踐干貨出來，本人實測實測過

需求

　　老板：我需要可以上傳全景圖片，然后手機網站上都可以360度看全景圖

需求分析

　　一個上傳功能

　　一個全景360度預覽功能

正文

　　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>