一、移動到某個目標位置
二、 讓物體沿路徑移動
三、 批量控制對象
上篇文章中我學習了控制
3D可視化場景中對象顯示隱藏和旋轉縮放,本篇我繼續學習控制3D可視化場景中對象位移和批量控制對象。
一、移動到某個目標位置
我閱讀文檔中心後發現ThingJS提供了moveTo設置一個移動動畫,rotateTo 設置一個旋轉動畫,scaleTo 設置一個縮放動畫,用 movePath 可設置讓物體沿一條路徑移動等方法。旋轉和縮放上篇文章已經實現了,下面我用moveTo 實現將3D可視化場景中物體移動到某個目標位置。
兩輛叉車我設置了兩個目標位置,一個是世界座標系一個是自身座標下的位置。
完整代碼以下:
var app = new THING.App({ url: "models/storehouse" }) // 加載場景後執行 app.on('load', function () { var car01 = app.query('car01')[0]; var car02 = app.query('car02')[0]; // 移動到 世界座標系下某位置 new THING.widget.Button('世界座標系下位置', function () { car01.moveTo({ position: [0, 0, 0], // 移動到世界位置 time: 2 * 1000, orientToPath: true, // lerpType:null, // 插值類型 默認爲線性插值 complete: function (ev) { console.log(ev.object.name + '移動完成'); } }); }) // 移動到 相對於自身座標下某位置 new THING.widget.Button('自身座標系下位置', function () { car02.moveTo({ offsetPosition: [0, 0, -10], // 相對自身 向後移動到 10m 處 time: 2 * 1000, orientToPath: true, complete: function (ev) { console.log(ev.object.name + '移動完成'); } }); }) });
二、讓物體沿路徑移動
還有一個神奇的方法 movePath,能夠設置一條路徑,讓3D可視化場景中物體沿路徑移動。
我建立了一個圓形路徑讓車沿着圓形路徑移動,完整代碼以下:
var app = new THING.App({ url: "models/storehouse"})// 加載場景後執行app.on('load', function () { // 經過 name 查詢到場景中的車 var car = app.query('car01')[0]; new THING.widget.Button('圓形路徑', function () { // 建立一個圓形路徑 var path = []; var radius = 10; for (var degree = 0; degree <= 360; degree += 10) { var x = Math.cos(degree * 2 * Math.PI / 360) * radius; var z = Math.sin(degree * 2 * Math.PI / 360) * radius; path.push([x, 0, z]); } // 讓車沿圓形路徑運動 car.movePath({ orientToPath: true, // 物體移動時沿向路徑方向 // orientToPathDegree: 90, // 沿向路徑方向偏移必定角度 path: path, time: 10 * 1000, // 循環類型 // THING.LoopType.Repeat 不斷循環 // THING.LoopType.PingPong 往復循環 loopType: THING.LoopType.Repeat }); }); new THING.widget.Button('中止移動', function () { car.stopMoving(); });});
三、批量控制對象
下面的代碼中,經過查詢結果返回的 Selector 對象,來進行批量對象控制。
// 加載ThingJS示例園區var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse', }); //經過load事件加載場景信息app.on('load', function() { var buildings = app.query('.Building'); buildings.visible = false; // 獲取場景內全部的建築並隱藏})
運行項目後,ThingJS 示例園區中的建築將被隱藏,若是將 visible 屬性值 false 改成 true 後,建築將顯示出來。批量控制對象頗有意思,上面我已經學習了控制3D可視化場景中物體移動,那麼經過批量控制對象是否是能夠實現3D可視化場景中多輛車自動泊車的效果呢?等我深刻學習後能夠試着實現一下。
經過學習控制對象我發現3D可視化場景中控制對象移動都是基於空間座標系來移動的,我對於空間座標系學習的還不足,下篇文章我打算研究一下空間座標系。