
科學界有一種說法,人類真正從二維文明發展到三維文明,其标志性事件其實是人造衛星的升空。3D可視化普及大衆,ThingJS的衆創能力功不可沒。
數字孿生可視化是未來趨勢,3D效果則成為追捧對象,2D是平面技術的一種,但是感官體驗、空間感與3D截然不同。人的世界是三維視覺,是以3D技術被認為是高度仿真,3D功能增效包括光效、雨霧、動畫等,力求逼真效果。
優锘科技獨立研發具有自主産權的數字孿生可視化平台和相應的解決方案,更是推出了史詩輕量級線上開發平台——ThingJS,滿足小微團隊快速開發3D可視化應用需求。數字孿生技術通過将建築模型、裝置模型、實體連接配接、感測資料和傳統的二維圖表結合的方式,消除了技術難度上的壁壘,建立了真實世界的數字鏡像。
真實場景還原
3D開發中會經常出現一個詞:管理對象,在3D空間内我們時時刻刻需要控制對象。先搭建精模真實還原對象外觀及位置,再利用ThingJS封裝庫開發3D仿真效果,最後輸對外連結接供PC端、移動端可通路,實作真實場景還原,常見的場景還原包括環境可視化、裝置可視化等。
環境可視化是将目前資料中心機房的實體環境做虛拟仿真,從機房、機櫃、機櫃内IT裝置及資料中心機房的各類基礎設施。
裝置可視化則是讓使用者在3D環境中搜尋、檢視裝置的外觀和資訊。一旦出現故障,三維可視化能夠讓客戶在場景中迅速定位到故障裝置的位置,也能夠通過實體位置的距離特性進行關聯分析。數字孿生技術手段有助于加速定位,故障得以解決。
3D輕量開發
實時巡檢或示範彙報等,這些都是數字孿生衆創項目的落地動作,ThingJS提供了技術支撐。
通過将數字孿生中特有的錄影機、視角和平滑切換技術整合起來,就形成了動畫制作的功能,利用這個功能,使用者能夠自己動手,把他感興趣的,任意角度的畫面無縫地銜接起來,形成一套完整的動畫。這個功能被使用者廣泛應用在實時巡檢和示範彙報上,充分地展現了數字孿生創新理念。
3D開發包括錄影機視角設定,ThingJS官方示例提供錄影機位置、飛到物體和環繞物體的實作方式。如下:
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 建立UI
function createUI() {
new THING.widget.Button('直接設定', set_camera);
new THING.widget.Button('飛到位置', flytoPos);
new THING.widget.Button('聚焦物體', fit_camera);
new THING.widget.Button('飛到物體', flytoObj);
new THING.widget.Button('環繞物體', rotate_around_obj);
}
createUI();
// 直接設定
function set_camera() {
// 設定錄影機位置和目标點
// 可直接利用 代碼塊——>錄影機——>設定位置
app.camera.position = [-10.179597135589418, 57.92056475377832, -69.93170920109229];
app.camera.target = [8.694689127408054, -7.003812939834516, 11.51772904610059];
// 列印目前錄影機位置 和 目标點
app.camera.log();
}
// 飛到位置
function flytoPos() {
// 錄影機飛行到某位置
// 可直接利用 代碼塊——>錄影機——>飛到位置
app.camera.flyTo({
position: [40.0, 10.0, 25.0],
target: [8.0, -2.0, 4.0],
time: 2000,
complete: function () {
console.log('飛行結束')
}
});
}
// 聚焦物體
function fit_camera() {
var car = app.query('car01')[0];
app.camera.fit(car);
}
// 飛到物體
function flytoObj() {
var car = app.query('car02')[0];
car.style.color = '#ff0000';
// 可直接利用 代碼塊——>錄影機——>飛到物體
// 錄影機飛行到某物體
app.camera.flyTo({
'object': car,
// 'xAngle': 30, //繞X軸旋轉的角度
// 'yAngle': 60, //繞Y軸旋轉的角度
// 'radiusFactor':3, //物體包圍球半徑的倍數
'time': 2 * 1000,
'complete': function () {
console.log('飛行結束');
car.style.color = null;
}
});
}
// 環繞物體,圍繞car在5秒内旋轉180度
function rotate_around_obj() {
var car = app.query('car01')[0];
app.camera.rotateAround({
object: car,
time: 5000,
yRotateAngle: 180
});
}
ThingJS輕松實作普通人快速搭建3D場景!