ThingJS之核心技术引擎及3D可视化开发能力
数字孪生的核心技术是使用了最新的三维可视化图形引擎。ThingJS拥有核心技术引擎和JS开发3D可视化能力，助你尽快部署物联网可视化！
数字孪生可视化是未来趋势，3D效果则成为追捧对象，2D是平面技术的一种，但是感官体验、空间感与3D截然不同。人的世界是三维视觉，所以3D技术被认为是高度仿真，3D功能增效包括光效、雨雾、动画等，力求逼真效果。
优锘科技独立研发具有自主产权的数字孪生可视化平台和相应的解决方案，更是推出了史诗轻量级在线开发平台——ThingJS，满足小微团队快速开发3D可视化应用需求。数字孪生技术通过将建筑模型、设备模型、物理连接、感测数据和传统的二维图表结合的方式，消除了技术难度上的壁垒，建立了真实世界的数字镜像。
真实场景还原
3D开发中会经常出现一个词：管理对象，在3D空间内我们时时刻刻需要控制对象。先搭建精模真实还原对象外观及位置，再利用ThingJS封装库开发3D仿真效果，最后输出链接供PC端、移动端可访问，实现真实场景还原，常见的场景还原包括环境可视化、设备可视化等。
环境可视化是将目前数据中心机房的物理环境做虚拟仿真，从机房、机柜、机柜内IT设备及数据中心机房的各类基础设施。
设备可视化则是让用户在3D环境中搜索、查看设备的外观和信息。一旦出现故障，三维可视化能够让客户在场景中迅速定位到故障设备的位置，也能够通过物理位置的距离特性进行关联分析。数字孪生技术手段有助于加速定位，故障得以解决。
3D轻量开发
实时巡检或演示汇报等，这些都是数字孪生众创项目的落地动作，ThingJS提供了技术支撑。
通过将数字孪生中特有的摄像机、视角和平滑切换技术整合起来，就形成了动画制作的功能，利用这个功能，用户能够自己动手，把他感兴趣的，任意角度的画面无缝地衔接起来，形成一套完整的动画。这个功能被用户广泛应用在实时巡检和演示汇报上，充分地体现了数字孪生创新理念。
3D开发包括摄像机视角设置，ThingJS官方示例提供摄像机位置、飞到物体和环绕物体的实现方式。如下：
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 创建UI
function createUI() {
new THING.widget.Button('直接设置', set_camera);
new THING.widget.Button('飞到位置', flytoPos);
new THING.widget.Button('聚焦物体', fit_camera);
new THING.widget.Button('飞到物体', flytoObj);
new THING.widget.Button('环绕物体', rotate_around_obj);
}
createUI();
// 直接设置
function set_camera() {
// 设置摄像机位置和目标点
// 可直接利用 代码块——>摄像机——>设置位置
app.camera.position = [-10.179597135589418, 57.92056475377832, -69.93170920109229];
app.camera.target = [8.694689127408054, -7.003812939834516, 11.51772904610059];
// 打印当前摄像机位置 和 目标点
app.camera.log();
}
// 飞到位置
function flytoPos() {
// 摄像机飞行到某位置
// 可直接利用 代码块——>摄像机——>飞到位置
app.camera.flyTo({
position: [40.0, 10.0, 25.0],
target: [8.0, -2.0, 4.0],
time: 2000,
complete: function () {
console.log('飞行结束')
}
});
}
// 聚焦物体
function fit_camera() {
var car = app.query('car01')[0];
app.camera.fit(car);
}
// 飞到物体
function flytoObj() {
var car = app.query('car02')[0];
car.style.color = '#ff0000';
// 可直接利用 代码块——>摄像机——>飞到物体
// 摄像机飞行到某物体
app.camera.flyTo({
'object': car,
// 'xAngle': 30, //绕X轴旋转的角度
// 'yAngle': 60, //绕Y轴旋转的角度
// 'radiusFactor':3, //物体包围球半径的倍数
'time': 2 * 1000,
'complete': function () {
console.log('飞行结束');
car.style.color = null;
}
});
}
// 环绕物体，围绕car在5秒内旋转180度
function rotate_around_obj() {
var car = app.query('car01')[0];
app.camera.rotateAround({
object: car,
time: 5000,
yRotateAngle: 180
});
}
零代码数据接入将在不久的将来实现，使用ThingJS平台简化3D开发！
