现今社会压力工作压力家庭压力都很大,每个人都要很多事情要做,忙的“不亦乐乎”,对于技术人员来说,面临工作上的压力会更大,每天不停敲代码都已经“生死疲劳”了。关于做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;
})
讲真,这种轻量级别的在线开发平台尤其适合我们这一代人,省去了自己大段敲代码的过程,以框架代码、快捷代码的方式,只需要简单写一些代码就可以搭建场景,在线开发,对接数据,进行项目部署。项目部署可以在线托管或者离线部署。总之省去了很多的时间和精力,技术人员一定要试一下哦~