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

不使用三维编辑器搭建三维场景时,可通过定义扩展模块的方式,实现最终三维场景描述文件的定义。
这种方式具有相同的灵活性和扩展性。
``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
}
})
获取模型对象
`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通信等