|
在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()结束框选
使用startAreaPickin()开始框选 其中 | Name | Type | Description |
|---|
params | Object | 参数列表 Properties| Name | 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，开创属于你的物联网可视化时代！ | 
2269
0
