首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3D可视化应用开发(webgl方向)到底有多难?

3D可视化应用开发(webgl方向)到底有多难?

原创
作者头像
要不要吃火锅
修改2019-12-18 10:22:25
2.5K0
修改2019-12-18 10:22:25
举报
文章被收录于专栏:3D可视化3D可视化

作为一个前端开发工程师,你是不是已经习惯了敲代码,写页面,修BUG,这一点毫无争议,这是工作性质决定的,就像运动员每天都要高强度训练一样。

前端工程师想要攻陷可视化应用平台开发,讲真的,只要认真钻研,不要三天打鱼两天晒网,做出来不错的可视化应用是必须可以的。

thingjs作为一个物联网可视化3D开发平台, 使用当今最热门的 Javascript 语言进行开发。前端工程师不需要大量写代码,只需要熟练掌握js,通过拖拽和简单写一些代码,极大降低 了3D 界面开发的成本,使项目更快完成,开发人员也能快速提升技术水平。

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

// 环境光对象

var ambientLight = {

    intensity:0.45,

    color: '16777215',

};

// 半球光照

var hemisphereLight = {

    intensity:0,

    color: '16777215',

    groundColor: '2236962',

};

// 主灯光对象

var mainLight = {

    shadow:true,

    intensity:1.5,

    color: '16777215',

    alpha:29,

    beta:30,

};

// 第二光源对象

var secondaryLight = {

    shadow:false,

    intensity:0,

    color: '16777215',

    alpha:138,

    beta:0,

};

// 全局配置

var config = {

    showHelper:false,

    ambientLight,

    hemisphereLight,

    mainLight,

    secondaryLight

};

app.lighting = config;

/**

* 说明:展示园区下的 Thing 物体、buildings 和 ground

* 园区下 只有在 CampusBuilder 中编辑了UserID、Name 或自定义属性的物体(摆放的模型),

* 才能在 ThingJS 中创建为 Thing 对象,

* 否则将合并到园区的 ground 中,无法单独进行管理。

* 操作:点击复选框

*/

var app = new THING.App({

    // 场景地址

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

});

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

    var campus = ev.campus;

    app.level.change(campus);

    var checkbox = createCheckBox();

    checkbox[0].on('change', function (ev) {

        // 获取园区下的所有建筑,返回为 Selector 结构

        var buildings = campus.buildings;

        if (ev) {

            buildings.style.color = '#ff0000';

        }

        else {

            buildings.style.color = null;

        }

    });

    checkbox[1].on('change', function (ev) {

        // 获取园区下的所有 Thing 类物体,返回为 Selector 结构

        var things = campus.things;

        if (ev) {

            things.style.color = '#ff0000';

        }

        else {

            things.style.color = null;

        }

    })

    checkbox[2].on('change', function (ev) {

        // 获取园区下的 ground

        var ground = campus.ground;

        if (ev) {

            ground.style.color = '#ff0000';

        }

        else {

            ground.style.color = null;

        }

    })

})

function createCheckBox() {

    // 界面组件

    var panel = new THING.widget.Panel({

        titleText: '园区级别结构',

        hasTitle: true

    });

    // 创建数据对象

    var dataObj = {

        checkbox: { '获取 buildings': false, '获取 things': false, '获取 ground': false },

    };

    // 加载复选框组件

    var check = panel.addCheckbox(dataObj, 'checkbox');

    return check;

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档