panoviewer VR 全景圖 -beta

panoviewer 動(dòng)態(tài)庫(kù)提供了在小程序中播放全景圖的方法，底層基于百度 webVR SDK Hydreigon 實(shí)現(xiàn)。

創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為翠屏企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、成都做網(wǎng)站，翠屏網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

使用方法

1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)

使用動(dòng)態(tài)庫(kù)的方法參見(jiàn)使用動(dòng)態(tài)庫(kù)，在app.json中增添一項(xiàng) dynamicLib，與pages同級(jí)。

JSON

 
 
 
  
  
  "dynamicLib": {  
  
   "myDynamicLib": {  
  
   "provider": "panoviewer"  
  
   }  
  
  },

2. 在使用到組件的頁(yè)面配置動(dòng)態(tài)庫(kù)

在每個(gè)使用到圖表組件的頁(yè)面，配置*.json文件如：

JSON

 
 
 
  
  
  {  
  
   "usingSwanComponents": {  
  
   "panoviewer": "dynamicLib://myDynamicLib/panoviewer"  
  
   }  
  
  }

3. 編寫(xiě)`*.swan`文件

SWAN

這是一種最基本的配置方式。style也可以在*.css中聲明，需要保證是有寬度和高度的。options在*.js中綁定到頁(yè)面的 data 中：

 
 
 
  
  
  const options = ...;  
  
    
  
  Page({  
  
   data: {  
  
   options: options  
  
   }  
  
  });

其中，options 是配置項(xiàng)，定義了全景圖的物料資源地址和渲染交互配置，一個(gè)典型的配置如下所示：

 
 
 
  
  
  options = {  
  
   "image": "https://xxx.com/.../xxx.jpg",  
  
   "smallPlanet": 3000,  
  
   "config": {  
  
   "projectionType": "equirectangular"  
  
   }  
  
  };

動(dòng)態(tài)庫(kù)屬性列表

上支持的屬性包括：

屬性名稱(chēng)	類(lèi)型	說(shuō)明
options	Object	配置項(xiàng)

關(guān)鍵配置項(xiàng)說(shuō)明

配置項(xiàng)名稱(chēng)	類(lèi)型	說(shuō)明
image	Object/String	投影模式對(duì)應(yīng)的資源配置
projectionType	String	投影模式名稱(chēng)
smallPlanet	Number	小行星動(dòng)畫(huà)時(shí)長(zhǎng)，如果未設(shè)置則表示無(wú)動(dòng)畫(huà)

投影模式

動(dòng)態(tài)庫(kù)支持多種投影模式，包括球形、立方體、EAC、手機(jī)全景、分級(jí)分塊，投影模式對(duì)應(yīng)的名稱(chēng)如下表：

投影模式	名稱(chēng)
球形	equirectangular
立方體	cubemap
EAC	cubestrip
手機(jī)全景	panorama
分級(jí)分塊	multires

除分級(jí)分塊模式外，其他模式的 image 字段為資源 url ，分級(jí)分塊模式的 image 參數(shù)是切片腳本生成的配置，說(shuō)明如下：

配置項(xiàng)名稱(chēng)	類(lèi)型	說(shuō)明
basePath	String	分塊圖的根目錄
path	String	分塊圖的格式化方式
fallbackPath	String	縮略圖路徑
extension	String	圖像格式
tileResolution	String	分塊 size
maxLevel	Number	最大級(jí)別
cubeResolution	Number	立方體單面 size

示例配置如下

 
 
 
  
  
  {  
  
   image: {  
  
   basePath:  
  
   "https://hydreigon-publish.cdn.bcebos.com/swan-hydreigon/pano/lujiazui-4k/",  
  
   path: "/%l/%s%y_%x",  
  
   fallbackPath: "/fallback/%s",  
  
   extension: "jpg",  
  
   tileResolution: 512,  
  
   maxLevel: 3,  
  
   cubeResolution: 1304  
  
   },  
  
   config: {  
  
   projectionType: "multires"  
  
   }  
  
  }

新聞標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：panoviewerVR全景圖-beta
文章地址：http://www.fisionsoft.com.cn/article/cdjojds.html

新聞中心