ThingJS之核心技術引擎及3D可視化開發能力


捕獲.PNG

數字孿生的核心技術是使用了最新的三維可視化圖形引擎。ThingJS擁有核心技術引擎和JS開發3D可視化能力,助你盡快部署物聯網可視化!

數字孿生可視化是未來趨勢,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開發!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM