|
对于目前市场来看，3D可视化正在冉冉升起，各种3D方面的第三方库也是应运而生，其中threejs作为目前十分火热的一个第三方js库，同时也有着十分完善的教程，唯一美中不足的就是入门不易，ThingJS作为一个webgl可视化平台，通过封装Threejs，制作了一款适合商业开发者使用的第三方库thingjs，将部分难以实现的操作直接内置了，也因此，大约一个月就能入门使用的threejs，在ThingJS平台中，一个星期就能够入门，并且能够着手开发出一个3D可视化项目，在ThingJS网站中也可以通过“资源中心”查看用户的公开项目（https://store.thingjs.com/?t=projects）。
thingjs之全局绑定事件 thingjs全局绑定事件on(eventType, condition?, userData?, callback, tag?, priority?) ，进行全局绑定则需要使用到app对象，使用app.on（）进行事件的全局绑定。 eventType：事件名称，比如load、click、update； condition：物体类型选择条件，比如.Thing ； userData： 事件传递自定义数据； callback,：事件触发的回调函数； tag：事件标签； priority：事件优先级（默认值 50 ），数值越大优先级越高，越先响应； - // 绑定 Click 事件
- app.on('click',function(ev){
- console.log(ev.object.name);
- })
- // 给场景中所有 Thing 类型对象，绑定 Click 事件
- app.on('click','.Thing',function(ev){
- console.log(ev.object.name);
- })
- // 设置事件标签 tag
- app.on('click','.Thing',function(ev){
- console.log(ev.object.name);
- },'我的点击事件01');
- // 设置事件优先级
- app.on('click',function(ev){
- console.log(ev.object.name);
- },'我的点击事件02',51)
- // 填写 userData 传递参数
- app.on('click', { color: '#ff0000' }, function (ev) {
- var color = ev.data.color;
- console.log(color)
- });
thingjs之物体查询 thingjs物体查询query(param) → {THING.Selector}，可以通过物体的属性、id、name、或者其他自定义属性来查询。我们可以对于查询到的物体进行一些操作，诸如移动，展示顶牌之类的。 - // 查询 id 为 001 的对象集合
- app.query('#001');
- // 查询名称为 car01 的对象集合
- app.query('car01');
- // 查询类型为 Thing 的对象集合
- app.query('.Thing');
- // 查询自定义属性 [prop=value] 的对象集合
- app.query('["userData/power"=60]');
- // 根据正则表达式匹配 name 中包含 'car' 的子物体
- app.query(/car/);
- // 上行代码等同于
- // var reg = new RegExp('car');
- // var cars=app.query(reg);
- // 注意：
- // 通过 query 查询的结果都是满足条件的对象集合（Selector）
- // 如需访问单个对象，可通过下标获取，如
- var obj=app.query('#001')[0];
- // 也可通过循环遍历对象集合
- var objs=app.query('.Thing');
- objs.forEach(function(obj){
- console.log(obj.name)
- })
webgl可视化平台ThingJS使用当下热门的 Javascript 语言进行开发，低门槛快速开发，很适合前端工程师线上开发创作。大家可以大胆一试，有任何问题也可以咨询ThingJS技术交流群，群号为1057489240。 | 
2392
0
