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

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

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

 

　　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;

})

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