乐趣区

关于javascript:ThingJS深入透明建筑场景基于js语法实现拾取技术

Three.js 选择对象的实质是从点击地位发射光线,但屏幕坐标系与 webgl 坐标系是不同的,而把屏幕的二维坐标转化为三维坐标就是要害,ThingJS 深刻通明修建场景,基于 js 语法实现拾取技术。

物联网利用中 3D 场景中的模型会越来越多,这时咱们不可避免须要一些交互成果,比方当点击某一个模型的时候做出反馈动作,这须要咱们可能通过鼠标的点击地位推导出点击到的模型,这种技术实现称为 3D 拾取。

Picker(选择器 / 拾取器 / 选取器)是指提供多个选项汇合供用户抉择其中一项的控件,在 T
hingJS 在线开发平台,Picker 是 thingjs 中为拾取制作的一个类,次要是用于拾取物体,同时也有框选拾取的性能。

在 3D 场景中会建设某些对应实在物品的对象,模型内置了简略动画,通过很多事件设置,比方点击鼠标、键盘输入、层级变动等,让用户监听这些事件,在事件回调中进行相应的业务逻辑解决。

在三维场景模型比拟多的时候,咱们须要思考如何高效的实现选取操作。官网反对不同的拾取技术实现:

  1. 通过属性和接口获取鼠标拾取(Pick)的物体
  2. 通过事件获取鼠标拾取的物体
  3. 区域 Pick 物体
  4. pickedResultFunc 设置拾取对象回调函数

官网示例新鲜出炉,能够用代码块批改进入层级抉择设置。
回调函数就是一个通过函数指针调用的函数,可通过 pickedResultFunc 设置拾取对象回调函数,示例如下:

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'     // 场景地址});
app.on('load', function (ev) {app.level.change(ev.campus);
})
//  批改进入层级抉择设置
// {String} ev.level 以后层级标识枚举值 可通过 THING.LevelType 获取枚举值,如修建层级标识为 THING.LevelType.Building
// {THING.BaseObject} ev.object 以后层级对象(将要进入的层级对象)// {THING.BaseObject} ev.current 以后层级对象(将要进入的层级对象)// {THING.BaseObject} ev.previous 上一层级对象(来到的层级对象)app.on(THING.EventType.EnterLevel, '.Campus', function (ev) {app.picker.pickedResultFunc = function (obj) {if (obj instanceof THING.Thing) {return obj;}
        return null;
    }
}, 'customLevelPickedResultFunc');
// 暂停园区层级的默认抉择行为
app.pauseEvent(THING.EventType.EnterLevel, '.Campus', THING.EventTag.LevelPickedResultFunc);

app.on('click', function (ev) {console.log(ev.object.name) })

app.on(THING.EventType.EnterLevel, '.Campus', function () {var build = app.buildings[0];
    build.floors.visible = true;
    build.floors[0].things.inheritStyle = false;
    build.style.opacity = 0.2;
    build.pickable = false;
    build.floors.forEach(function (floor) {floor.pickable = false;})
    build.floors[0].things.forEach(function (thing) {thing.pickable = true;})
})

ThingJS,你的 3D 交互技术专家就在这。

退出移动版