基于WebGL架构的ThingJS-3D可视化平台—电力组态

栏目: 编程工具 · 发布时间: 5年前

内容简介:前言随着现代工业生产规模的日益扩大,工业自动化应用日益呈现规模化、复杂化和广域分布化特征,同时随着信息化时代的到来,使得用户对组态的功能和结构都提出了更高的要求。Demo预览

前言

随着现代工业生产规模的日益扩大,工业自动化应用日益呈现规模化、复杂化和广域分布化特征,同时随着信息化时代的到来,使得用户对组态的功能和结构都提出了更高的要求。

Demo预览

基于WebGL架构的ThingJS-3D可视化平台—电力组态

基于WebGL架构的ThingJS-3D可视化平台—电力组态

基于WebGL架构的ThingJS-3D可视化平台—电力组态

实现

第一步,加载场景。当前场景中的建筑都是由Campus Builder中的万能物体组装起来的。

// 创建App 
    var app = new THING.App({
    // 场景地址
    "url": "/uploads/wechat/S2Vyd2lu/scene/Demo_电路tjs"
});

基于WebGL架构的ThingJS-3D可视化平台—电力组态

第二步,修改场景背景,修改建筑的材质和不透明度。再用我们之前常用的RouteLine将这些建筑物连接在一起就成功了。这里先查出来所有的build,再遍历obj改变他们的贴纸以及不透明度,设置transparent为true将obj更改为透明材质。关于设置材质还有一些其他的参数见下图:

基于WebGL架构的ThingJS-3D可视化平台—电力组态

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;
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

链接

链接

[美] 巴拉巴西 / 徐彬 / 湖南科技出版社 / 2007-04-01 / 28.00

从鸡尾酒会到恐怖分子的巢穴,从远古的细菌到国际组织——所有这一切各自都是一种网络,都是一个令人惊讶的科学革新的一部分。21世纪初,有科学家发现,网络具有深层的秩序,依据简单而强有力的规则运行。这一领域的知识帮助我们了解时尚、病毒等的传播机制,了解生态系统的稳健性,以及经济体系的脆弱性——甚至是民主的未来。 一位致力于研究“链接和节点”的科学家将首次带领我们领略网络革新的内幕。在本书中,作者生......一起来看看 《链接》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试