新聞中心
- spintileviewer VR 3D 環(huán)物 -beta
- 使用方法
- 1. 在項目中引用動態(tài)庫
- 2. 在使用到組件的頁面配置動態(tài)庫
- 3. 編寫
*.swan文件
- 動態(tài)庫屬性列表
- 關(guān)鍵配置項說明
- 關(guān)鍵配置項說明
- 使用方法
spintileviewer VR 3D 環(huán)物 -beta
spintileviewer 動態(tài)庫提供了在小程序中播放 3D 環(huán)物的方法,底層基于百度 webVR SDK Hydreigon 實現(xiàn)。

會澤網(wǎng)站制作公司哪家好,找成都創(chuàng)新互聯(lián)!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作,到程序開發(fā),運營維護(hù)。成都創(chuàng)新互聯(lián)公司2013年成立到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
使用方法
1. 在項目中引用動態(tài)庫
使用動態(tài)庫的方法參見使用動態(tài)庫,在app.json中增添一項 dynamicLib,與pages同級。
- JSON
"dynamicLib": {"myDynamicLib": {"provider": "spintileviewer"}},
2. 在使用到組件的頁面配置動態(tài)庫
在每個使用到圖表組件的頁面,配置*.json文件如:
- JSON
{"usingSwanComponents": {"spintileviewer": "dynamicLib://myDynamicLib/spintileviewer"}}
3. 編寫*.swan文件
- SWAN
這是一種最基本的配置方式。style也可以在*.css中聲明,需要保證是有寬度和高度的。options在*.js中綁定到頁面的 data 中:
- JS
const options = ...;Page({data: {options: options}});
其中,options 是配置項,定義了 3D 環(huán)物的物料資源地址和渲染交互配置,一個典型的配置如下所示:
- JS
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]};
動態(tài)庫也支持鏈接方式傳遞配置,如果是跨域訪問,需要配置跨域訪問 CORS 規(guī)則。使用方法如下:
- SWAN
參考配置文件。
動態(tài)庫默認(rèn)僅支持核心的 3D 環(huán)物渲染(多視角分級分塊)和交互(拖拽縮放),也可以通過設(shè)置defaultui=true來顯示默認(rèn)的控件,支持 PC 和移動端的適配,支持功能包括:熱點、縮放按鈕、復(fù)位按鈕、全屏按鈕、二維碼等,配置文件是在無 UI 配置項的基礎(chǔ)上增加了相關(guān)字段,一個典型的有 UI 配置如下:
- JS
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": "正文顯示,純正文情況。測試測試測試測試測試測試測試測試","img": "","title": "超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(biāo)題chb超長標(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 配置文件。
動態(tài)庫屬性列表
上支持的屬性包括:
| 屬性名稱 | 類型 | 說明 |
|---|---|---|
| options | Object | 配置項 |
| config | String | 配置項鏈接 |
| defaultui | Boolean | 是否顯示默認(rèn)控件 |
關(guān)鍵配置項說明
| 配置項名稱 | 類型 | 說明 |
|---|---|---|
| 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
鏈接地址:http://www.dlmjj.cn/article/coiejsh.html


咨詢
建站咨詢
