3D Real 開發者工具 API threed-real-sdk.js

GitHub： https://github.com/BaiFeng3DREAL/threed-real-viewer 詳情： 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 開發者工具，可以幫助您開發自己的三維産品展示頁面，提供了高度自定義的接口。使用方式如下：

引入方式

初始化

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衆設平台

開發文檔-

接入流程

檢視。