介绍

dt-sdk是什么

DT-SDK是数字孪生产品用于渲染并操控三维场景的JS SDK，通过该DT-SDK可把三维编辑器编辑的三维场景场景描述文件（点击查看场景描述文件），在浏览器中自动还原成三维场景。
DT-SDK是基于当下最流行的三维开发框架three.js做的上层封装，DT-SDK的架构设计和使用类似VUE框架。

如何使用

在您使用DT-SDK前我们默认您已经了解了三维可视化，
并对three.js或webgl有一定的认识，如果您还没听过three.js和webgl，我们推荐您先点击以下链接进行初步的了解：
three.js、webgl。

$3

结合三维场景编辑器使用DT-SDK，可快速构建出想要的三维场景。使用三维编辑器的流程如下图所示：

使用DT-SDK可直接把三维编辑器导出的三维场景描述文件，在浏览器中快速渲染成三维场景，
DT-SDK除了可渲染出三维场景外，还可以对三维场景的模型进行操作和扩展，以实现个性化的需求。

$3

不使用三维场景编辑器的情况下，依然可使用DT-SDK进行三维场景的开发，开发流程如下图所示：

不使用三维编辑器搭建三维场景时，可通过定义扩展模块的方式，实现最终三维场景描述文件的定义。
这种方式具有相同的灵活性和扩展性。

第一个demo

以下用使用三维编辑器流程时vue的项目为例，首先构建我们的项目结构如下：

``text public - model - AiPark.fbx - index.html src - data - dt-data.js - plugin ai-park.js - views - index.vue - main.js - app.vue`

data/dt-data.js文件内容如下：`js export default { name: "ap-park", version: "0.0.1", //version shadow: true, // 阴影 autoRender: true, camera: { //初始化视角 lookAt: [0, 0, 0], //中心点坐标,所有内容相对于中心点坐标 frustum: { //视锥 fov: 80, //垂直角度 aspect: window.innerWidth / window.innerHeight, near: 0.05, //可视最近距离 far: 1000 //可视最远距离 }, transformMatrix: { position: [0, 10, 25], //相对于原点坐标 }, }, controls: [ { //控制器类型 type: "OrbitControls", //lookAt scan firstPerple props: { maxDistance: 300, minDistance: 100 } }, { //控制器类型 type: "TransformControls" //lookAt scan firstPerple } ], scene: { background: { type: "color", color: "#ffffff" }, children: [ { //环境光源设置 type: "DirectionalLight", //光源类型 transformMatrix: { //一个模型对应多个实现/多个位置姿态 position: [100, 100, 100], //相对于原点坐标 }, props: { intensity: 0.56, color: 0xffffff } }, { type: "AmbientLight", props: { intensity: 0.58, color: 0xffffff } }, { //图层具体内容 type: "FbxLoader", shadow: true, disable: true, url: "/model/AiPark.fbx", //模型地址 } ] } };`

views/index.vue文件内容如下：`vue`

plugin/ai-park.js文件内容给如下：`js import {createComponent, DTModule} from 'dt-sdk-js'; export default createComponent({ type: DTModule.Type.FbxLoader, created(){ // do something } })`

`$3`


在DT-SDK中提供了多种方式获取模型对象
1. 知道模型的唯一ID（$uuid）通过

helper.getModuleByUid

获取模型对象

vue
helper.getModuleByUid($uuid)


2. 在模型扩展中

this

即为模型对象

js
import {createComponent, DTModule} from 'dt-sdk-js';
export default createComponent({
    type: DTModule.Type.FbxLoader,
    created(){
        // this 即为模型对象
    }
})


$3

在模型扩中可通过

this.$context

获取上下文

js
import {createComponent, DTModule} from 'dt-sdk-js';
export default createComponent({
    type: DTModule.Type.FbxLoader,
    created(){
        // this.$context 渲染上下文
    }
})


$3

在DT-SDK中提供了两个方式注册事件
1. 通过

helper.addEventListener

可注册全局的事件监听

js
import {helper, DTEvent} from 'dt-sdk-js';
helper.addEventListener(DTEvent.Mouse.pointerdown, (event)=>{
    console.log(event)
})


2. 在模型扩展中通过

this.addEventListener

进行事件监听

js
import {createComponent, DTModule, DTEvent} from 'dt-sdk-js';
export default createComponent({
    type: DTModule.Type.FbxLoader,
    created(){
        // this.$context 渲染上下文
        this.addEventListener(DTEvent.Mouse.pointerdown, event=>{
            this.handleEvent(event)
        })  
    },
    handleEvent(event){}
})

基础架构

DT-SDK的基础架构主要分以下几个模块：场景描述文件解析器、插件系统、事件系统、组件扩展系统以及最核心的渲染器。
本框架基于three.js框架封装，及最终的渲染逻辑由three.js负责完成。在完成三维场景渲染的基础上，
DT-SDK提供了大量上层的API，可对场景中的模型进行扩展和个性化操作。

在当前的架构设计中，通过插件系统和组件扩展系统，可完成对更复杂业务需求的支持。例如集成数据可视化、开发数据看板、三维场景的动态加载、websocket/mqtt通信等

介绍