3D Real 開發者工具

GitHub：https://github.com/BaiFeng3DRE…
詳情：https://www.3dreal.com

用途

3D Real 開發者工具，能夠幫助您開發本身的三維產品展現頁面，提供了高度自定義的接口。

名詞定義

• 普通模型（General Model）：與模型中心「個人模型」中的模型一一對應。
• 場景（Scene）：與模型中心「個人搭配」中的場景一一對應。場景由一個或多個產品構成，如襯衫、褲子等構成一個場景。
• 產品（Product）: 產品由一個或多個組合組成，如圓擺襯衫可由口袋、大身兩個組合組成。
• 組合（Combination）：組合由一個或多個部件組成，如圓擺襯衫大身（組合）由袖口襉、門襟、後片、領型、袖口等組成。
  備註：每一個組合可關聯多種材料。
• 部件（Part）：部件包括一個或多個基本模型，如圓擺襯衫領型包括小方領、小尖領、一字領、立領、中標領等。
• 基本模型（Basic Model）：基本模型由一個模型和（零個或多個）固定模型組成，如襯衫領型可由領子模型，釦子、釦眼、縫線等固定模型組成。
• 固定模型 (Fixed Model) ：如襯衫領型的扣子、釦眼、縫線等能夠做爲固定模型。
• 面料（Fabric）：貼在模型上的貼圖。

後臺接口

爲了保證安全，如下接口須要經過後端接入，而後經過大家自行設計的接口將數據傳入到前端，並把數據給到3D前端SDK。

獲取access token

URL：/api/getAccessToken
Method：GET

queryData:
accessKey: 從API申請頁面拿到的accessKey,
accessSecret: 從API申請頁面拿到的accessSecret

Return:

{
    // 返回狀態碼， 0爲成功，其餘爲失敗。
    code: number,

    // 錯誤信息
    message: string,
    
    // token
    data: string
}

3D Real 開發者工具

3D Real 開發者工具，能夠幫助您開發本身的三維產品展現頁面，提供了高度自定義的接口。使用方式以下：

引入方式

<script src="js/threed-real-sdk-1.0.0.js"></script>

初始化

var api = new ThreeDRealAPI(token: string);

參數解析:
    token: 使用 AccessKey 和 AccessSecret 獲取的token。

獲取私有場景

獲取私有搭配列表

api.fetchScenes()

參數解析:
  返回值: Promise<{
    id: number,
    name: string,
    cover: string
  }[]>

獲取私有模型列表

api.fetchScenes()

參數解析:
  返回值: Promise<{
    id: number,
    name: string,
    cover: string
  }[]>

獲取 遠端數據 以及 三維場景交互控制器

獲取搭配數據，以及三維場景交互控制器。

api.getCollocationView();

參數解析:
  返回值: Promise<{
    data: object（如何使用，請看 demo 中的例子）,
    threedViewer: ThreeDRealViewer
  }[]>

獲取模型數據，以及三維場景交互控制器。

api.getModelView(div: HTMLDivElement, id: number, finish?: () => void);
參數解析:
  返回值: Promise<{
    data: object（如何使用，請看 demo 中的例子）,
    threedViewer: ThreeDRealViewer
  }[]>

經過上面的接口獲取三維視圖控制器，對於搭配來講，咱們能夠經過調用如下接口觸發模型的變換：

切換產品

viewer.selectProduct(productIndex: number);

參數解析:
    productIndex: 當前產品對應的下標.
    返回值: undefined

說明:
  用於動畫切換，若是沒有觸發動畫，請確認後臺是否有設置動畫操做。

切換組合

viewer.selectCombination(productIndex: number, combIndex: number);

參數解析:
    productIndex: 當前產品對應的下標.
    combIndex: 當前組合的下標.
    返回值: undefined

說明:
  用於動畫切換，若是沒有觸發動畫，請確認後臺是否有設置動畫操做。

切換組件

viewer.selectElement(productIndex: number, combIndex: number, pIndex: number, eIndex: number);

參數解析:
    productIndex: 當前產品對應的下標.
    combIndex: 當前組合的下標.
    pIndex: 當前部件的下標.
    eIndex: 須要切換到的組件的下標.
    返回值: Promise

切換面料

viewer.selectFabric (productIndex: number, combIndex: number, targetFIndex: number);

參數解析:
    productIndex: 當前產品對應的下標.
    combIndex: 當前組合的下標.
    targetFIndex: 須要切換到的面料的下標
  返回值: Promise

銷燬 三維視圖控制器

viewer.destroy()

總結

具體的接入流程能夠進入3DREAL衆設平臺開發文檔-接入流程查看。