webgl可视化平台ThingJS之全局绑定事件

zzzzzker 2019-11-21 871

       对于目前市场来看,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。

最后于 5月前 被ThingJS_用户支持编辑 ,原因:
最新回复 (0)

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

返回