webgl可視化平臺ThingJS之查詢並且控制物體移動

ThingJS中如何查詢並控制3D場景中的物體?

使用query方法就可以查詢到3D場景中的物體,並且對該物體進行控制,比如控制物體沿某一路徑移動等等。但是,最好是在場景創建的時候就爲每一個物體添加諸如id、name等屬性,方便在ThingJS中查詢到該物體,並且對該物體進行控制。

具體使用方法如下:

// 查詢 id 爲 001 的對象集合
app.query('#001');
// 查詢名稱爲 car01 的對象集合
app.query('car01');
// 查詢類型爲 Thing 的對象集合
app.query('.Thing');
// 查詢自定義屬性 [prop=value] 的對象集合
app.query('["userData/power"=60]');
// 根據正則表達式匹配 name 中包含 'car' 的子物體
app.query(/car/);
// 上行代碼等同於
// var reg = new RegExp('car');
// var cars=app.query(reg);
 
// 注意:
// 通過 query 查詢的結果都是滿足條件的對象集合(Selector)
// 如需訪問單個對象,可通過下標獲取,如
var obj=app.query('#001')[0];
// 也可通過循環遍歷對象集合
var objs=app.query('.Thing');
objs.forEach(function(obj){
  console.log(obj.name)
})

查詢出來的物體沿某一路徑移動:

app.on('load', function () {
    // 通過 name 查詢到場景中名字叫做car01的車的集合,並且選擇控制集合中的第一個元素
    var car = app.query('car01')[0];
 
    new THING.widget.Button('方形路徑', function () {
        // 世界座標系下座標點構成的數組 關於座標的獲取 可利用「工具」——>「拾取場景座標」
        var path = [[0, 0, 0], [20, 0, 0], [20, 0, 10], [0, 0, 10], [0, 0, 0]];
        car.movePath({
            orientToPath: true, // 物體移動時沿向路徑方向
            path: path, // 路徑座標點數組
            time: 5 * 1000, // 路徑總時間 毫秒
            delayTime: 1000, // 延時 1s 執行
            lerpType: null, // 插值類型(默認爲線性插值)此處設置爲不插值
            // 僅當無循環時 有回調函數
            complete: function (ev) {
                console.log(ev.object.name + "移動結束")
            }
        });
    })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章