轻量级3D可视化应用开发首选它

zhangman@uinnova.com 9月前 635

        现今社会压力工作压力家庭压力都很大,每个人都要很多事情要做,忙的“不亦乐乎”,对于技术人员来说,面临工作上的压力会更大,每天不停敲代码都已经“生死疲劳”了。关于做3D可视化应用开发大家有没有好的方法呢?今天我分享给大家这个平台,绝对轻量级别,门槛低,开发成本低,普通的前端开发工程师,熟悉webgl,掌握js就可以在线开发。

  ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能,只需要具有基本的 Javascript 开发经验即可上手。

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

  ThingJS提供了场景加载、分层级浏览,对象访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。

  ThingJS提供如下相关组件和工具供用户使用:

  CityBuilder:聚焦城市的 3D 地图搭建工具,打造你的 3D 城市地图。

  CamBuilder:简单、好用、免费的 3D 场景搭建工具。

  ThingPano:全景图制作工具,轻松制作并开发全景图应用,实现 3D 宏观场景和全景微观场景的无缝融合。

  ThingDepot:上万种模型,数十个行业,自主挑选,一次制作多次复用。

场景灯光.js

/**

* 说明:调整场景灯光

* 通过 app.lighting 属性设置

* 具体参数调节以及效果调整可使用「工具」——>「场景效果」——> 「灯光配置」

* 在工具中调整好效果后,可点击「生成代码块」按钮

* 即可在代码编辑器中使用相关参数

* 详见教程

* 教程:ThingJS教程——>效果和环境——>灯光

* 难度:★☆☆☆☆

*/

var app = new THING.App({

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

});

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

    app.camera.position = [18.217000353088125, 16.96513529990897, 11.90387798709408];

    app.camera.target = [-0.92, 2.1, 2.7];

})

// 环境光对象

var ambientLight = {

    intensity: 0.4,

    color: '#FFFFFF',

};

// 半球光照

var hemisphereLight = {

    intensity: 0.5,

    color: '#FFFFFF',

    groundColor: '#202020',

};

// 主灯光对象

var mainLight = {

    shadow: true,

    intensity: 0.6,

    color: '#FFFFFF',

    alpha: 120,

    beta: 0,

};

// 第二光源对象

var secondaryLight = {

    shadow: false,

    intensity: 0,

    color: '#FFFFFF',

    alpha: 0,

    beta: 0,

};

// 全局配置

var config = {

    ambientLight,

    hemisphereLight,

    mainLight,

    secondaryLight

}

new THING.widget.Button('调整场景灯光', function () {

    // 设置灯光

    app.lighting = config;

})

讲真,这种轻量级别的在线开发平台尤其适合我们这一代人,省去了自己大段敲代码的过程,以框架代码、快捷代码的方式,只需要简单写一些代码就可以搭建场景,在线开发,对接数据,进行项目部署。项目部署可以在线托管或者离线部署。总之省去了很多的时间和精力,技术人员一定要试一下哦~

最新回复 (0)

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

返回