简单好用封装threejs库3D可视化试一下?

zhangman@uinnova.com 6月前 1773

3D可视化应用开发对每个企业来说都是大工程,需要投入大量的人力物力财力才能做好这项工程,但其实可是化繁为简,不需要大费周章,具体来说,thingjs3D可视化开发平台,基于webgl3D绘制标准,使用最热门的Javascript语言,封装threejs库,前端工程师可实现在线开发,可视化场景通过拖拽和简单写一些代码,对接数据源,项目部署之后就可以运行在您的服务器了~真是简单好用呢。

thingjs-面向物联网的3D可视化开发平台

/**

* 说明:将场景中对象展示到界面上

* 操作:点击界面上选择框

* 说明:场景初始化完成后,子物体的显隐、样式默认继承父物体的显隐状态、样式

*      通过 obj.inheritVisible = true/false 控制子物体是否继承父物体显隐状态

*/

// 引入jquery.easyui插件

THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {

    var panel =

        `<div class="easyui-panel" style="opacity: 0; padding:5px; width: 300px;height: auto;margin-top: 10px;margin-left: 10px; position: absolute; top: 0; left: 0; z-index: 1;background-color: white">

            <ul id="objectTree" class="easyui-tree"></ul>

        </div>`

    $('#div2d').append($(panel));

})

var app = new THING.App({

    url: 'https://www.thingjs.com/static/models/storehouse'

});

// 这里使用了jquery.easyui的tree插件

app.on('load', function (ev) {

    var buildings = app.query('.Building');

    buildings.forEach(function (building) {

        building.floors.forEach(function (floor) {

            // 设置楼层不受建筑显隐控制

            // floor.inheritVisible = false

        })

    });

    $('#objectTree').parent().css('opacity', 1);

    $('#objectTree').tree({

        data: getRootData(ev.campus),

        checkbox: true,

        cascadeCheck: false,

        onCheck: function (node, checked) {

            app.query('#' + node.id).visible = checked;

        }

    })

});

// 根节点信息由 建筑 和 室外物体 组成

function getRootData(campus) {

    var data = [];

    campus.buildings.forEach(function (building) {

        data.push(getBuildingData(building));

    });

    campus.things.forEach(function (thing) {

        data.push(getThingData(thing));

    });

    return data;

}

// 收集 建筑 信息

function getBuildingData(building) {

    var data = {

        id: building.id,

        checked: true,

        state: 'closed',

        text: building.type + ' (' + building.id + ')'

    };

    data["children"] = [];

    building.floors.forEach(function (floor) {

        data["children"].push(getFloorData(floor));

    });

    return data;

}

// 收集 楼层 信息

function getFloorData(floor) {

    var data = {

        id: floor.id,

        checked: true,

        state: 'closed',

        text: floor.type + ' (level:' + floor.levelNumber + ')'

    };

    data["children"] = [];

    floor.things.forEach(function (thing) {

        data["children"].push(getThingData(thing));

    });

    return data;

}

// 收集 物 信息

function getThingData(thing) {

    return {

        id: thing.id,

        checked: true,

        text: thing.type + ' (' + thing.name + ')'

    };

}

简单好用threejs库3D可视化平台thingjs,前端工程师会js就可以的,试一下你就知道如何做啦~

最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回