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

zzzzzker 4月前 460

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)

其中

NameTypeDescription
paramsObject

参数列表

Properties
NameTypeDescription
xNumber

屏幕 x 坐标

yNumber

屏幕 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,开创属于你的物联网可视化时代!

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

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

返回