共计 2799 个字符，预计需要花费 7 分钟才能阅读完成。
前言随着现代工业生产规模的日益扩大，工业自动化应用日益呈现规模化、复杂化和广域分布化特征，同时随着信息化时代的到来，使得用户对组态的功能和结构都提出了更高的要求。
Demo 预览实现第一步，加载场景。当前场景中的建筑都是由 Campus Builder 中的万能物体组装起来的。
// 创建 App
var app = new THING.App({
// 场景地址
“url”: “/uploads/wechat/S2Vyd2lu/scene/Demo_电路 tjs”
});
第二步，修改场景背景，修改建筑的材质和不透明度。再用我们之前常用的 RouteLine 将这些建筑物连接在一起就成功了。这里先查出来所有的 build，再遍历 obj 改变他们的贴纸以及不透明度，设置 transparent 为 true 将 obj 更改为透明材质。关于设置材质还有一些其他的参数见下图：
app.on(‘load’, function () {
app.background =”http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/bg3d.jpg”;
app.camera.position = [-32.37000213825802, 28.29026120065235, -60.979284414554186];
app.camera.target = [-3.817, 0.01, -8.082];
app.query(‘field’).style.setMaterial(
{
image: “http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/field2.png”,
transparent: true,
doubleSide: true,
opacity: 1
}
);
app.query(/build/).forEach(function (obj) {
obj.style.setMaterial({
image: “http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/wall2.png”,
transparent: true,
doubleSide: true,
opacity: 0.9
});
});
var points = [[17.889, 0.5, -18.997],[0.233, 0.5, -18.997],[-26.663, 0.5, -18.997],[-26.663, 0.5, -11.327],[-26.663, 0.5, 4.022],[-14.25, 0.5, 4.022],[14.761, 0.5,4.022],[14.761, 0.5, -4.022],[19.975, 0.5, -4.022],[19.975, 0.5, -10.785],[-6.929, 0.5, -10.785],[-6.929, 0.5, -8.649],[1.493, 0.5, -8.649],[-16.053, 0.5, -8.649] ]
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 = 1;
});
完整代码
// 创建 App
var app = new THING.App({
// 场景地址
“url”: “/uploads/wechat/S2Vyd2lu/scene/Demo_电路 tjs”
});
// 加载场景后执行
app.on(‘load’, function () {
app.background =”http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/bg3d.jpg”;
app.camera.position = [-32.37000213825802, 28.29026120065235, -60.979284414554186];
app.camera.target = [-3.817, 0.01, -8.082];
app.query(‘field’).style.setMaterial(
{
image: “http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/field2.png”,
transparent: true,
doubleSide: true,
opacity: 1
}
);
app.query(/build/).forEach(function (obj) {
obj.style.setMaterial({
image: “http://www.thingjs.com/uploads/wechat/oLX7p042tJ-sUpk9MIXIwVo4PsHc/file/builds/wall2.png”,
transparent: true,
doubleSide: true,
opacity: 0.9
});
});
var points = [[17.889, 0.5, -18.997],[0.233, 0.5, -18.997],[-26.663, 0.5, -18.997],[-26.663, 0.5, -11.327],[-26.663, 0.5, 4.022],[-14.25, 0.5, 4.022],[14.761, 0.5,4.022],[14.761, 0.5, -4.022],[19.975, 0.5, -4.022],[19.975, 0.5, -10.785],[-6.929, 0.5, -10.785],[-6.929, 0.5, -8.649],[1.493, 0.5, -8.649],[-16.053, 0.5, -8.649] ]
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 = 1;
});