在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)

其中

 /**
 * 说明: 拾取物体
 */

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，开创属于你的物联网可视化时代！

• thingjs
• 物联网可视化
• webgl
• 三维建模
• 三维实景
• 3D可视化开发平台
• API接口
• 3D模型制作
• Javascript 语言