dt-sdk

介绍

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。

使用编辑器

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

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

不使用编辑器

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

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

第一个demo

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

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文件内容如下：

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文件内容如下：

<template>
    <div id="dtSdk" class="dt-sdk-container"></div>
</template>
<script>
import DTSdk from 'dt-sdk-js';
import DtData from '@/data/dt-data';
export default {
    mounted(){
        new DTSdk({
            data: DtData,
            el: "dtSdk"
        })
    }
}
</script>
<style>
.dt-sdk-container{
    width: 100%;
    height: 100%;
}
</style>

plugin/ai-park.js文件内容给如下：

import {createComponent, DTModule} from 'dt-sdk-js';
export default createComponent({
    type: DTModule.Type.FbxLoader,
    created(){
        // do something
    }
})

获取模型对象

在DT-SDK中提供了多种方式获取模型对象

1. 知道模型的唯一ID（$uuid）通过helper.getModuleByUid获取模型对象

helper.getModuleByUid($uuid)

2. 在模型扩展中this即为模型对象

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

获取上下文

在模型扩中可通过this.$context获取上下文

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

响应点击事件

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

1. 通过helper.addEventListener可注册全局的事件监听

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

2. 在模型扩展中通过this.addEventListener进行事件监听

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通信等