webgl可视化平台ThingJS随笔-Picker类介绍

在webgl平台开发3d可视化场景应用时，总会有一些很常见的问题，有的十分简单就能解决，有的想破脑袋也不知道怎么搞定，尤其是当你在使用一个只有部分人在使用的技术，能在网上查到的资料也没那么多，有时候对于熟练者来说可能是基础的知识，对于初学者来说却摸不着头脑，甚至有时候连描述都无法描述出来，所以很多时候，大神们写的博客或随笔就能在关键时刻助我们一臂之力。在这里，我们就讲讲webgl平台ThingJS中Picker的作用。

Picker是thingjs中为拾取制作的一个类，主要是用于拾取物体，同时也有框选拾取的功能，让使用者在多选模型时候更为便捷，同时也更好操作。

使用app.picker.objects我们可以获取当前帧系统默认拾取物体集合(执行物体过滤处理后)

1. var sel = app.picker.objects;

复制代码

使用pickedResultFunc 设置拾取结果回调函数，返回的对象即为拾取对象；

1. app.picker.pickedResultFunc = function (object) {
2. return object;
3. }

复制代码

使用previousObjects 获取上一帧拾取物体集合(执行物体过滤处理后)

1. var sel = app.picker.previousObjects;

复制代码

使用results 获取当前帧原生拾取物体集合(忽略物体过滤处理)

1. var sel = app.picker.results;

复制代码

使用endAreaPickin()结束框选

1. endAreaPickin()

复制代码

使用startAreaPickin()开始框选

1. startAreaPickin(params)

复制代码

其中

Name	Type	Description
params	Object	参数列表 Properties Name Type Description x Number 屏幕 x 坐标 y Number 屏幕 y 坐标 realTimePicking? Boolean 是否实时框选(速度较慢) drawRegion? Boolean 是否绘制框选区域

1. /**
2. * 说明: 拾取物体
3. */
5. var app = new THING.App({
6. url: 'https://www.thingjs.com/static/models/storehouse'
7. });
9. app.on('load', function () {
10. // 鼠标拾取物体显示边框
11. app.on(THING.EventType.MouseEnter, '.Thing', function(ev) {
12. ev.object.style.outlineColor = '#FF0000';
13. });
14. // 鼠标离开物体边框取消
15. app.on(THING.EventType.MouseLeave, '.Thing', function(ev) {
16. ev.object.style.outlineColor = null;
17. });
19. // 每一帧判断拾取的物体是否发生变化
20. app.on('update', function () {
21. if (app.picker.isChanged()) {
22. console.clear();
23. // 打印当前被pick的物体
24. if (app.picker.objects[0]) {
25. console.log('当前拾取的物体 ' + app.picker.objects[0].name);
26. }
27. // 打印之前被pick的物体
28. if (app.picker.previousObjects[0]) {
29. console.log('之前拾取的物体 ' + app.picker.previousObjects[0].name);
30. }
31. }
32. });
33. });

复制代码

在webgl可视化平台ThingJS中有着十分详细的官方文档，其中有关于如何使用ThingJS的API，也有着如何开始搭建一个3D可视化有用的流程，同时在ThingJS的资源中心中也有着视频教程，从模型制作到webgl应用开发，可以说是“一条龙服务”。ThingJS，开创属于你的物联网可视化时代！