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交互技術專家就在這。