百度智能小程序 VR 3D 環(huán)物-beta

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

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

使用方法

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í)。

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

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

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

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

3. 編寫 *.swan 文件

<spintileviewer options="{{ options }}" style="width: 100%; height: 100%; display: block"></spintileviewer>

這是一種最基本的配置方式。style 也可以在 *.css 中聲明，需要保證 <spintileviewer> 是有寬度和高度的。options 在 *.js 中綁定到頁(yè)面的 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ù)也支持鏈接方式傳遞配置，如果是跨域訪問(wèn)，需要配置跨域訪問(wèn) CORS 規(guī)則。使用方法如下：

<spintileviewer config="{{ config }}" style="width: 100%; height: 100%; display: block"></spintileviewer>

參考配置文件 url：https://hydreigon-dev.cdn.bcebos.com/demo/assets/panamera_256/external/closed/config.json

動(dòng)態(tài)庫(kù)默認(rèn)僅支持核心的 3D 環(huán)物渲染（多視角分級(jí)分塊）和交互（拖拽縮放），也可以通過(guò)設(shè)置defaultui=true來(lái)顯示默認(rèn)的控件，支持 PC 和移動(dòng)端的適配，支持功能包括：熱點(diǎn)、縮放按鈕、復(fù)位按鈕、全屏按鈕、二維碼等，配置文件是在無(wú) 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ù)屬性列表

<spintileviewer> 上支持的屬性包括：

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