從零開始學習3D視覺化之拾取

1、 透過屬性和介面獲取滑鼠拾取(Pick)的物體

2、 透過事件獲取滑鼠拾取的物體

3、 區域 Pick 物體

4、 pickedResultFunc設定拾取物件回撥函式

在開發

數字孿生視覺化

場景應用時經常會用到

拾取

功能,顧名思義,在數字孿生視覺化場景中拾取就是判斷一個數字孿生視覺化場景中哪個物件被點選。數字孿生視覺化場景中的模型非常多,不可避免需要一些互動效果。比如當點選某一個模型的時候做出反饋動作,這需要能夠透過滑鼠的點選位置推匯出點選到的模型,這種技術實現稱為拾取。

在數字孿生視覺化場景中模型比較多的時候,應該如何高效的實現拾取操作呢?下面介紹四種方法:

1、透過屬性和介面拾取(Pick)物體

透過平臺提供的屬性和介面可以獲取滑鼠拾取到(Pick)的物體,將下面的程式碼輸入到專案檔案中,就會在日誌視窗輸出當前拾取和之前拾取的數字孿生視覺化物體。

從零開始學習3D視覺化之拾取

程式碼如下:

// 每一幀判斷拾取的物體是否發生變化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); } }});

2、透過事件獲取滑鼠拾取的物體

透過事件獲取滑鼠拾取的物體,可以透過 MouseEnter 和 MouseLeave 事件來實現 。將下面的程式碼輸入到專案檔案中,即可給滑鼠拾取到的物件新增邊框。

從零開始學習3D視覺化之拾取

程式碼如下:

// 滑鼠拾取物體顯示邊框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;});

3、區域 Pick 物體

透過滑鼠框選一個數字孿生視覺化區域獲取區域內的物體,可以參考下面程式碼根據實際需求進行框選物體的獲取。

// 由於框選比較消耗效能,因此預先設定框的“候選集”,只在候選集中框選var things = app。query(‘。Thing’);app。picker。areaCandidates = things; // 啟動框選 傳入 滑鼠按下時開始框選的螢幕座標app。picker。startAreaPicking({ x: x, y: y});//結束框選app。picker。endAreaPicking();

4、pickedResultFunc設定拾取物件回撥函式

pickedResultFunc設定拾取物件回撥函式,可以參考下面的程式碼根據具體需求實現對應效果。

從零開始學習3D視覺化之拾取

程式碼如下:

// 修改進入層級選擇設定// {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, ‘。Building’, function (ev) { app。picker。pickedResultFunc = function (obj) { return obj; }}, ‘customLevelPickedResultFunc’);// 暫停建築層級的預設選擇行為app。pauseEvent(THING。EventType。EnterLevel, ‘。Building’, THING。EventTag。LevelPickedResultFunc);

————————————————

數字孿生視覺化:https://www。thingjs。com/