内容简介:前言随着现代工业生产规模的日益扩大,工业自动化应用日益呈现规模化、复杂化和广域分布化特征,同时随着信息化时代的到来,使得用户对组态的功能和结构都提出了更高的要求。Demo预览
前言
随着现代工业生产规模的日益扩大,工业自动化应用日益呈现规模化、复杂化和广域分布化特征,同时随着信息化时代的到来,使得用户对组态的功能和结构都提出了更高的要求。
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; });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
- 遇见大数据可视化:来做一个数据可视化报表
- 遇见大数据可视化: 未来已来,变革中的数据可视化
- Python 数据可视化 2018:数据可视化库为什么这么多?
- 数据可视化设计(1)情感化设计指导可视化设计理念
- 基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。