在webgl平台开发3d可视化场景应用时,总会有一些很常见的问题,有的十分简单就能解决,有的想破脑袋也不知道怎么搞定,尤其是当你在使用一个只有部分人在使用的技术,能在网上查到的资料也没那么多,有时候对于熟练者来说可能是基础的知识,对于初学者来说却摸不着头脑,甚至有时候连描述都无法描述出来,所以很多时候,大神们写的博客或随笔就能在关键时刻助我们一臂之力。在这里,我们就讲讲webgl平台ThingJS中Picker的作用。
Picker是thingjs中为拾取制作的一个类,主要是用于拾取物体,同时也有框选拾取的功能,让使用者在多选模型时候更为便捷,同时也更好操作。
使用app.picker.objects我们可以获取当前帧系统默认拾取物体集合(执行物体过滤处理后)
var sel = app.picker.objects;
使用pickedResultFunc 设置拾取结果回调函数,返回的对象即为拾取对象;
app.picker.pickedResultFunc = function (object) {
return object;
}
使用previousObjects 获取上一帧拾取物体集合(执行物体过滤处理后)
var sel = app.picker.previousObjects;
使用results 获取当前帧原生拾取物体集合(忽略物体过滤处理)
var sel = app.picker.results;
使用endAreaPickin()结束框选
endAreaPickin()
使用startAreaPickin()开始框选
startAreaPickin(params)
其中
Name | Type | Description |
---|
params | Object | 参数列表 PropertiesName | Type | Description |
---|
x | Number | 屏幕 x 坐标 | y | Number | 屏幕 y 坐标 | realTimePicking? | Boolean | 是否实时框选(速度较慢) | drawRegion? | Boolean | 是否绘制框选区域 |
|
/**
* 说明: 拾取物体
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
app.on('load', function () {
// 鼠标拾取物体显示边框
app.on(THING.EventType.MouseEnter, '.Thing', function(ev) {
ev.object.style.outlineColor = '#FF0000';
});
// 鼠标离开物体边框取消
app.on(THING.EventType.MouseLeave, '.Thing', function(ev) {
ev.object.style.outlineColor = null;
});
// 每一帧判断拾取的物体是否发生变化
app.on('update', function () {
if (app.picker.isChanged()) {
console.clear();
// 打印当前被pick的物体
if (app.picker.objects[0]) {
console.log('当前拾取的物体 ' + app.picker.objects[0].name);
}
// 打印之前被pick的物体
if (app.picker.previousObjects[0]) {
console.log('之前拾取的物体 ' + app.picker.previousObjects[0].name);
}
}
});
});
在webgl可视化平台ThingJS中有着十分详细的官方文档,其中有关于如何使用ThingJS的API,也有着如何开始搭建一个3D可视化有用的流程,同时在ThingJS的资源中心中也有着视频教程,从模型制作到webgl应用开发,可以说是“一条龙服务”。ThingJS,开创属于你的物联网可视化时代!
最后于 2019-11-26
被ThingJS_用户支持编辑
,原因: