thingjs-webgl可视化平台超快入门

678 阅读2分钟

  对于目前市场来看,3D可视化正在冉冉升起,各种3D方面的第三方库也是应运而生,其中threejs作为目前十分火热的一个第三方js库,同时也有着十分完善的教程,唯一美中不足的就是入门不易,ThingJS作为一个webgl可视化平台,通过封装Threejs,制作了一款适合商业开发者使用的第三方库thingjs,将部分难以实现的操作直接内置了,也因此,大约一个月就能入门使用的threejs,在ThingJS平台中,一个星期就能够入门,并且能够着手开发出一个3D可视化项目,在ThingJS网站中也可以通过“资源中心”查看用户的公开项目(store.thingjs.com/?t=projects)。

  使用thingjs需要了解什么?

  第一:了解thingjs的核心对象-App;

  第二:学会摄像机camera;

  第三:学会控制对象;

  第四:了解或者学会图表的使用;

  第五:了解或者学会数据对接;

  第六:学会如何发布项目;   

  什么是thingjs的核心对象App?

  App对象是ThingJS 库的入口,提供加载场景、搜索、事件绑定、摄像机控制等功能,一般而言,创建App对象的代码会在代码第一行书写,同时App对象还有四个属性:

  url:初始场景资源路径,这个场景必须是在ThingJS平台中存在的(使用CamBuilder或者CityBuilder搭建的场景进行开发时都会生成场景资源路径);

  skyBox:天空盒资源名称,目前有BulBlueSky(蓝天)、MilkyWay(银河)、Night(黑夜)、CloudSky(多云)、White(灰白)、Dark(暗黑);

  background:设置场景的背景颜色或图片;

  complete:场景资源初始化完成后的函数回调;

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

  15

  16

  17

  18

  19// 仅初始化 3D 应用

  var app=new THING.App();

  // 初始化 3D 应用,并加载场景

  var app = new THING.App({

  url: 'www.thingjs.com/static/mode…'// 场景地址

  });

  // 设置天空盒

  var app = new THING.App({

  url: 'www.thingjs.com/static/mode…',// 场景地址

  skyBox:'BlueSky'

  });

  // 设置背景图片

  var app = new THING.App({

  url: 'www.thingjs.com/static/mode…',// 场景地址

  background: 'www.thingjs.com/static/imag…'

  });