3D Real 开发者工具 API threed-real-sdk.js

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: GitHub:https://github.com/BaiFeng3DREAL/threed-real-viewer详情:https://www.3dreal.com用途3D Real 开发者工具,可以帮助您开发自己的三维产品展示页面,提供了高度自定义的接口。

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众设平台开发文档-接入流程查看。

相关文章
|
5天前
|
编译器 API 定位技术
API和SDK的区别
API 和 SDK 的区别在于:API 是一组定义了软件组件之间交互规范的接口,用于实现不同软件组件之间的通信;而 SDK 是一个全面的工具集合,包含 API、编译器、调试器、文档等,用于特定平台的应用程序开发。SDK 范围更广,内容更丰富,更具体和具象化,适合复杂的开发需求;API 则更加抽象,侧重于功能的定义和调用方式。
|
1月前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
81 3
|
12天前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
14天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API 服务器
【10月更文挑战第3天】使用 Node.js 和 Express 构建 RESTful API 服务器
|
4天前
|
编译器 API 定位技术
API和SDK的区别
API(应用程序编程接口)和SDK(软件开发工具包)的主要区别在于范围、内容、抽象程度及使用方式。API定义了软件组件间的交互规则,范围较窄,更抽象;而SDK提供了一整套开发工具,包括API、编译器、调试器等,范围广泛,具体且实用,有助于提高开发效率。
|
5天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
6 0
|
9天前
|
JSON JavaScript API
Node.js RESTful API
10月更文挑战第8天
8 0
|
14天前
|
JSON JavaScript 前端开发
使用 Node.js 和 Express 构建 RESTful API
【10月更文挑战第3天】 使用 Node.js 和 Express 构建 RESTful API
|
14天前
|
Web App开发 JSON JavaScript
使用 Node.js 构建一个简单的 RESTful API
【10月更文挑战第3天】使用 Node.js 构建一个简单的 RESTful API
|
2月前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。

热门文章

最新文章