宁波企业网站搭建价格,快速搭建网站教程,全国网站设计公司,合肥公司门户网站制作NSDT 编辑器 提供三维场景构建、场景效果设计、场景服务发布全流程工具等#xff0c;其场景编辑器支持资产管理、灯光设置、骨骼动画等功能#xff1b;致力于协助资源不足的中小企业及个人快速开发数字孪生场景#xff0c;帮助企业提高生产力、实现降本增效。
NSDT编辑器简…NSDT 编辑器 提供三维场景构建、场景效果设计、场景服务发布全流程工具等其场景编辑器支持资产管理、灯光设置、骨骼动画等功能致力于协助资源不足的中小企业及个人快速开发数字孪生场景帮助企业提高生产力、实现降本增效。
NSDT编辑器简化了WebGL 3D应用的开发完全兼容Three.JS生态。同时为了满足用户自定义业务的需求NSDT 编辑器 还封装了基于three.js的SDK用户可以在自己的应用中嵌入使用NSDT编辑器搭建的3D场景并通过JS API与场景进行交互实现自定义业务功能。
1、什么是viwer 孪生世界
Viewer 是描述孪生世界的顶层对象提供场景绘制和交互的画布.从viwer中可以获取场景中的任何对象并对获取到的对象进行处理。获取场景对象的方法非常简单直接在参数element指定的 DOM 元素中创建孪生世界场景。示例代码
//import { Viewer } from nsdtted //引入Viewer类const viewer new Viewer(container) //在id为container的元素内创建孪生世界
const sceneId 63a13d2d39c45778ba1bedd0; //要加载的场景的id
viewer.loadScene(sceneId,() { //加载场景数据console.log(completed!)
})2、如何使用viwer 孪生世界
创建场景的孪生对象以后孪生对象可以调用其内部的各种属性和方法完成自定义业务的开发工作下面我们详细介绍下viwer内部有那些可操作的属性和方法。
2.1 属性
.canvas: HTMLCanvasElement
当前场景 canvas 容器。
.scene: THREE.Scene
孪生世界的 THREE.JS scene 场景。
.camera: Camera
孪生世界中的摄像机。
.objectGroup: THREE.Object3D[]
孪生世界中所有可拾取的 Object3d 对象。
2.2 方法
.addLayer(layer: Layer): Void
在孪生世界中创建数据图层。
示例代码
//import DT from nsdtted
const modelLayer new DT.layer.ModelLayer(models); //创建一个图层
viewer.addLayer(modelLayer);
.removeLayer(layer: Layer): Void
在孪生世界中删除数据图层。
.hasLayer(layer: Layer): Boolean
查询图层是否存在。
.getLayer(id: string): Layer | undefined
通过图层 id 获取图层。
.getLayers(): Layer[]
获取全部图层。
.getTwins(id: String): Twin
通过挛生体 id 获取挛生体。
.getWorldTree(): JSON
获取世界大纲树。
参数说明children图层组中的挛生体id图层组 idlabel图层组名字type图层组类型visible是否显示
children参数说明id挛生体 idlayerId图层组 idlabel挛生体名字type挛生体类型visible是否显示
.pickupCoord(event:MouseEvent): THREE.Vector3 | null
拾取与平面交点的坐标。
.pickup(event:MouseEvent): Object | null
拾取孪生世界 包含在 objectGroup 中的模型。
.setActiveTwins(twin: Twin[] | string[]): Void | null
传入挛生体实例对象或挛生体id批量设置挛生体的包围框。
.clearActive(): Void | null
清空所有挛生体的包围框。
.destroy(): Void
销毁场景。
.statistics(): { element: String, vertices: String, triangles: String }
统计场景中的 mesh 数量、顶点数和面数。
.loadScene(sceneId: string, cb: Function) Void
通过场景 id 加载孪生世界场景。
viewer.loadScene(sceneId,() {console.log(completed!)
})
.getRoamingList(sceneId: string, cb: Function) Void
通过场景 id 获取孪生世界的漫游列表。
viewer.getRoamingList(sceneId, (res) {const roamData res[0].pointsconst roaming DT.RoamingPath.createRoamingPath(roamData, () {console.log(complete);});roaming.start();
});
.setObjectGroup() THREE.Object3D[]
重新设置 objectGroup 数组筛选出可拾取的 Object3d 对象。
.on(event: String, handler: Function, context?:Any): Void 绑定孪生世界事件的监听处理器。
.off(event: String, handler: Function): Void
解绑孪生世界事件的监听处理器。
.trigger(event: String): Void
触发绑定的孪生世界事件。
事件
目前支持的事件如下
事件说明DT.MouseEventType.CLICK当鼠标点击场景时触发DT.MouseEventType.DB_CLICK当鼠标双击场景时触发DT.MouseEventType.MOUSE_DOWN当鼠标摁下时触发DT.MouseEventType.MOUSE_UP当鼠标抬起时触发DT.MouseEventType.MOUSE_MOVE当鼠标移动时触发DT.MouseEventType.RIGHT_CLICK当鼠标右击时触发
示例代码
//监听鼠标单击事件
viewer.mouseEvent.on(DT.MouseEventType.CLICK, (e) {console.log(e) //打印鼠标信息
});
3、实例展示
我们先看一个实例如何加载场景html代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./libs/css/style.css /titleDocument/title/headbodycanvas classcanvas webgl/canvasscript src./libs/js/three.js/scriptscript src./libs/js/three/nsdtted.umd.min.js/scriptscriptconsole.log(DT);const canvas document.querySelector(canvas.webgl);const sceneId 63a13d2d39c45778ba1bedd0;// //初始化场景const viewer new DT.Viewer(canvas);console.log(DT);console.log(viewer);console.log(viewer.scene); //three.js的sceneviewer.loadScene(sceneId, async (scene) {console.log(scene);});/script/body
/html
效果图如下 原文链接3D孪生场景SDKViwer 孪生世界 (mvrlink.com)
