基于WebGL架构的3D可视化平台—工业组态
前言
随着现代工业生产规模的日益扩大，工业自动化应用日益呈现规模化、复杂化和广域分布化特征，同时随着信息化时代的到来，使得用户对组态的功能和结构都提出了更高的要求。
Demo预览
实现
第一步，加载场景代码。
//加载场景代码
var app = new THING.App({
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/CB20190227155744",
});
第二步， 完成各模块之间的连线。先创建一个createLine(points)方法，设置 scrollUV= true；可可开启line的UV动画会看到流动的效果。
function createLine(points) {
var line = app.create({
type: 'RouteLine',
name: "panoLine",
arrowFlag: false,
points: points,
image: 'http://thumb.static.3dmomoda.com/textures/18090613poqikheg.png' // 线路中的纹理资源
});
// 启用 UV 动画
line.scrollUV = true;
line.renderOrder = -10000;
line.width = 8;
return line;
}
第二步，当点击某一模块时弹出面板。
var panel;
app.on('SingleClick', function (ev) {
var object = ev.object;
if (object == null || object.name == "field")
return;
if (panel) {
panel.destroy();
panel = null;
}
panel = new THING.widget.Panel({
width: '150px',
cornerType: 'polyline',
})
// 绑定物体身上相应的属性数据
panel.addString(object, 'name').caption('name');
panel.addString(object, 'id').caption('power');
// 创建UIAnchor面板
var uiAnchor = app.create({
// 类型
type: 'UIAnchor',
// 父节点设置
parent: object,
// 要绑定的页面的 element 对象
element: panel.domElement,
// 设置 localPosition 为 [0, 0, 0]
localPosition: [0, 0, 0],
// 指定页面的哪个点放到localPosition位置上(百分比)
pivot: [-0.2, 2.1]
});
// 将对应的 Panel 存下来 便于后续使用
uiAnchor["panel"] = panel;
return uiAnchor;
});
第三步，添加鼠标悬停，鼠标滑过，点击右键，双击左键等鼠标监听事件。
app.on('click', function (ev) {
if (ev.button == 2) {
if (panel) {
panel.destroy();
panel = null;
}
// 摄像机飞行到某位置
app.camera.flyTo({
'position': [-175.1389999999999, 312.259, 291.0899999999999],
'target': [32.181, 1.279, -19.89],
'time': 2000,
'complete': function () {
}
});
app.resumeEvent('mouseon', '.Thing', '鼠标悬停');
}
});
app.on('dblclick', function (ev) {
app.pauseEvent('mouseon', '.Thing', '鼠标悬停');
var object = ev.object;
app.camera.flyTo({
'time': 1500,
'object': object,
'position': [0, 0, 0]
});
object.localPosition = [0,0,0];
});
//滑过勾边
app.on('mouseon', '.Thing', function (ev) {
var object = ev.object;
object.moveTo({
"offset": [0, 6, 0],
"time": 80,
});
}, "鼠标悬停");
app.on('mouseoff', '.Thing', function (ev) {
var object = ev.object;
object.stopMoving();
object.localPosition = [0, 0, 0];
});
第四步，在场景中创建Line。
app.on('load', function () {
app.background = "http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/bg3d.jpg";
var line1 = createLine([[-107.474, -0.5, -61.046], [-107.474, -0.5, 72.455], [144.306, -0.5, 72.455], [144.306, -0.5, -61.046], [-107.474, -0.5, -61.046]]);
var line2 = createLine([[-27.788, -0.5, -61.046], [-27.788, -0.5, 72.455]]);
var line3 = createLine([[59.414, -0.5, -60.524], [59.414, -0.5, 72.455]]);
var line4 = createLine([[144.306, -0.5, 4.358], [-107.474, -0.5, 4.358]]);
});
小结
在这个demo我们首次使用了事件暂停（pauseEvent）与事件恢复（resumeEvent），消除在我们双击聚焦某一模块对鼠标单击事件产生的影响。使用工具中的拾取场景坐标能使我们快速的找到场景中的点将他们连起来。对事件相关的疑问可以访问：http://www.thingjs.com/guide/?m=api
完整代码
//加载场景代码
var app = new THING.App({
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/S2Vyd2lu/scene/CB20190227155744",
});
app.on('load', function () {
app.background = "http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/bg3d.jpg";
var line1 = createLine([[-107.474, -0.5, -61.046], [-107.474, -0.5, 72.455], [144.306, -0.5, 72.455], [144.306, -0.5, -61.046], [-107.474, -0.5, -61.046]]);
var line2 = createLine([[-27.788, -0.5, -61.046], [-27.788, -0.5, 72.455]]);
var line3 = createLine([[59.414, -0.5, -60.524], [59.414, -0.5, 72.455]]);
var line4 = createLine([[144.306, -0.5, 4.358], [-107.474, -0.5, 4.358]]);
});
var panel;
app.on('SingleClick', function (ev) {
var object = ev.object;
if (object == null || object.name == "field")
return;
if (panel) {
panel.destroy();
panel = null;
}
panel = new THING.widget.Panel({
width: '150px',
cornerType: 'polyline',
})
// 绑定物体身上相应的属性数据
panel.addString(object, 'name').caption('name');
panel.addString(object, 'id').caption('power');
// 创建UIAnchor面板
var uiAnchor = app.create({
// 类型
type: 'UIAnchor',
// 父节点设置
parent: object,
// 要绑定的页面的 element 对象
element: panel.domElement,
// 设置 localPosition 为 [0, 0, 0]
localPosition: [0, 0, 0],
// 指定页面的哪个点放到localPosition位置上(百分比)
pivot: [-0.2, 2.1]
});
// 将对应的 Panel 存下来 便于后续使用
uiAnchor["panel"] = panel;
return uiAnchor;
});
app.on('click', function (ev) {
if (ev.button == 2) {
if (panel) {
panel.destroy();
panel = null;
}
// 摄像机飞行到某位置
app.camera.flyTo({
'position': [-175.1389999999999, 312.259, 291.0899999999999],
'target': [32.181, 1.279, -19.89],
'time': 2000,
'complete': function () {
}
});
app.resumeEvent('mouseon', '.Thing', '鼠标悬停');
}
});
app.on('dblclick', function (ev) {
app.pauseEvent('mouseon', '.Thing', '鼠标悬停');
var object = ev.object;
app.camera.flyTo({
'time': 1500,
'object': object,
'position': [0, 0, 0]
});
object.localPosition = [0,0,0];
});
//滑过勾边
app.on('mouseon', '.Thing', function (ev) {
var object = ev.object;
object.moveTo({
"offset": [0, 6, 0],
"time": 80,
});
}, "鼠标悬停");
app.on('mouseoff', '.Thing', function (ev) {
var object = ev.object;
object.stopMoving();
object.localPosition = [0, 0, 0];
});
function createLine(points) {
var line = app.create({
type: 'RouteLine',
name: "panoLine",
arrowFlag: false,
points: points,
image: 'http://thumb.static.3dmomoda.com/textures/18090613poqikheg.png' // 线路中的纹理资源
});
// 启用 UV 动画
line.scrollUV = true;
line.renderOrder = -10000;
line.width = 8;
return line;
}