spintileviewer VR 3D 環(huán)物 -beta

spintileviewer 動(dòng)態(tài)庫(kù)提供了在小程序中播放 3D 環(huán)物的方法，底層基于百度 webVR SDK Hydreigon 實(shí)現(xiàn)。

會(huì)澤網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

使用方法

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

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

JSON

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

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

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

JSON

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

3. 編寫`*.swan`文件

SWAN

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

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

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

 
 
 
  
  
  options = {
  
  
   "spin": {
  
  
   "thumb": "https://xxx.com/.../thumb.jpg",
  
  
   "crossLongitude": false,
  
  
   "reversalY": true,
  
  
   "reversalX": true,
  
  
   "initColRow": [
  
  
   0,
  
  
   0
  
  
   ],
  
  
   "rowCount": 1,
  
  
   "colCount": 30,
  
  
   "imageUrl": [
  
  
   [
  
  
   "https://xxx.com/.../00.jpg"
  
  
   ]
  
  
   ],
  
  
   "scaleType": "inside"
  
  
   },
  
  
   "tile": {
  
  
   "scaleType": "inside",
  
  
   "width": 1350,
  
  
   "enableUrlCORSOrigin": true,
  
  
   "height": 1620,
  
  
   "tileSize": 254
  
  
   },
  
  
   "tileSources": [
  
  
   [
  
  
   "https://xxx.com/.../00_00_files/",
  
  
   ...
  
  
   ]
  
  
   ],
  
  
  
  
  
   "backgroundColor": "#565656",
  
  
   "initColRow": [
  
  
   0,
  
  
   0
  
  
   ]
  
  
  };

動(dòng)態(tài)庫(kù)也支持鏈接方式傳遞配置，如果是跨域訪問，需要配置跨域訪問 CORS 規(guī)則。使用方法如下：

SWAN

參考配置文件。

動(dòng)態(tài)庫(kù)默認(rèn)僅支持核心的 3D 環(huán)物渲染（多視角分級(jí)分塊）和交互（拖拽縮放），也可以通過設(shè)置defaultui=true來顯示默認(rèn)的控件，支持 PC 和移動(dòng)端的適配，支持功能包括：熱點(diǎn)、縮放按鈕、復(fù)位按鈕、全屏按鈕、二維碼等，配置文件是在無 UI 配置項(xiàng)的基礎(chǔ)上增加了相關(guān)字段，一個(gè)典型的有 UI 配置如下：

 
 
 
  
  
  options = {
  
  
   "ver": 1,
  
  
   "scenes": [
  
  
   {
  
  
   "sceneName": "scene_01",
  
  
   "sceneType": "spin",
  
  
   "thumb": "https://xxx.com/.../thumb.jpg",
  
  
   "spinImages": [
  
  
   [
  
  
   "https://xxx.com/.../00.jpg"
  
  
   ]
  
  
   ],
  
  
   "tileSources": [
  
  
   [
  
  
   "https://xxx.com/.../00_00_files/",
  
  
   ...
  
  
   ]
  
  
   ],
  
  
   "colCount": 32,
  
  
   "rowCount": 1,
  
  
   "initColRow": [
  
  
   0,
  
  
   0
  
  
   ],
  
  
   "scaleType": "inside",
  
  
   "tileSize": 254,
  
  
   "minLevel": 9,
  
  
   "width": 8256,
  
  
   "height": 5504
  
  
   }
  
  
   ],
  
  
   "hotspotsInfo": [
  
  
   {
  
  
   "className": "info",
  
  
   "id": "adsasasd",
  
  
   "popup": {
  
  
   "describe": "正文顯示，純正文情況。測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試",
  
  
   "img": "",
  
  
   "title": "超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb超長(zhǎng)標(biāo)題chb",
  
  
   "href": "https://www.baidu.com"
  
  
   },
  
  
   "tip": "車頭561564126514651653165"
  
  
   },
  
  
   ...
  
  
   ],
  
  
   "hotspotsPos": {
  
  
   "scene_01": {
  
  
   "00_00": [
  
  
   {
  
  
   "id": "adsa55sasd",
  
  
   "x": 0.65,
  
  
   "y": 0.2
  
  
   },
  
  
   ...
  
  
   }
  
  
   },
  
  
   "guideListFilter": "global",
  
  
   "guideList": [
  
  
   {
  
  
   "scene": "scene_01",
  
  
   "view": "01_00",
  
  
   "id": "adsasasd"
  
  
   },
  
  
   ...
  
  
   ]
  
  
  }

參考含 UI 配置文件。

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

上支持的屬性包括：

屬性名稱	類型	說明
options	Object	配置項(xiàng)
config	String	配置項(xiàng)鏈接
defaultui	Boolean	是否顯示默認(rèn)控件

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

配置項(xiàng)名稱	類型	說明
thumb	String	縮略圖 url
spinImages	Array	環(huán)視圖 url 二維數(shù)組，第一維表示行，第二維表示列
tileSources	Array	分塊圖目錄 url 二維數(shù)組，第一維表示行，第二維表示列
colCount	Number	列數(shù)
rowCount	Number	行數(shù)
initColRow	Array	初始視角
scaleType	String	圖像適配類型。inside：留白，crop：裁切
tileSize	Number	分塊 size
width	Number	圖像原始寬
height	Number	圖像原始高

本文題目：創(chuàng)新互聯(lián)百度小程序教程：spintileviewerVR3D環(huán)物-beta
網(wǎng)站路徑：http://fisionsoft.com.cn/article/coiejsh.html

新聞中心