原创 通過矩陣變化實現的 3D 模型自動佈局

在數學中，矩陣是以行和列排列的數字，符號或表達式的矩形陣列，任何矩陣都可以通過相關字段的標量乘以元素。矩陣的主要應用是表示線性變換，即 f（x）= 4 x 等線性函數的推廣。例如，旋轉的載體在三維空間是一個線性變換，這可以通過一個表示旋轉矩

2019-11-01 09:45:52

原创 基於 HTML5 WebGL 的 3D 網絡拓撲圖

前言 在數據量很大的 2D 場景下，要找到具體的模型比較困難，並且只能顯示出模型的的某一部分，顯示也不夠直觀，這種時候能快速搭建出 3D 場景就有很大需求了。但是搭建 3D 應用場景又依賴於通過 3ds Max 或 Maya 的專業 3D

2019-10-30 11:45:55 2

原创 將拓撲圖和圖表繪製在 3D 六面體上

突然有個想法，如果能把一些用到不同的知識點放到同一個界面上，並且放到一個盒子裏，這樣我如果要看什麼東西就可以很直接顯示出來，而且這個盒子一定要能打開。我用 HT 實現了我的想法，代碼一百多行，這麼少的代碼能實現這種效果我覺得還是牛的。 先來

2019-10-29 11:55:31 3

原创 基於 HTML5 Canvas 的電信機櫃 U 位動態管理

前言 U 是一種表示服務器外部尺寸的單位，是 unit 的縮略語，詳細的尺寸由作爲業界團體的美國電子工業協會（EIA）所決定。之所以要規定服務器的尺寸，是爲了使服務器保持適當的尺寸以便放在鐵質或鋁質的機架上。機架上有固定服務器的螺孔，以便它

2019-10-28 10:15:29 4

原创 基於 HTML5 WebGL 的 3D 模型斜面生成

前言 3D 場景中的面不只有水平面這一個，空間是由無數個面組成的，所以我們有可能會在任意一個面上放置物體，而空間中的面如何確定呢？我們知道，空間中的面可以由一個點和一條法線組成。這個 Demo 左側爲面板，從面板中拖動物體到右側的 3D 場

2019-10-25 10:25:29

原创 基於 HTML5 Canvas 實現的 TP-LINK 電信拓撲設備面板

前言 今天我們以真實的 TP-LINK 設備面板爲模型，完成設備面板的搭建，和指示燈的閃爍和圖元流動。 先來目睹下最終的實現效果：http://www.hightopo.com/demo/... 代碼實現 TP-LINK面板 我們從 TP-

2019-10-24 10:15:32 1

原创 基於 HTML5 WebGL 的 3D 工控裙房系統

前言 工業物聯網在中國的發展如火如荼，網絡基礎設施建設，以及工業升級的迫切需要都爲工業物聯網發展提供了很大的機遇。中國工業物聯網企業目前呈現兩種發展形式並存狀況：一方面是大型通訊、IT企業的佈局；一方面是傳統工業軟件和工業網絡企業自發地延伸

2019-10-23 11:35:25

原创 基於HTML5的WebGL實現的2D3D迷宮小遊戲

爲了實現一個基於HTML5的場景小遊戲，我採用了HT for Web來實現，短短200行代碼，我就能實現用“第一人稱”來操作前進後退上下左右，並且實現了碰撞檢測。 先來看下實現的效果： http://hightopo.com/guide/g

2019-10-22 20:35:19

原创 基於 HTML5 Canvas 實現的文字動畫特效

前言 文字是網頁中最基本的元素，一般我們在網頁上都是展示的靜態文字，但是就效果來說，還是比較枯燥的。文字淡入淡出的動畫效果在項目中非常實用，如果有某些關鍵的文字，可以通過這種動態的效果來提醒用戶閱讀。 動態效果圖  http://www.

2019-10-21 08:55:27

原创 基於 HTML5 Canvas 的 3D 渲染引擎構建生產管控系統

前言 這一期爲大家帶來一個非常好玩的 demo，我們製作一套自己的 3D 管道控制系統，運用了（ http://www.hightopo.com ）HT 的 Graph3dView 組件通過對 WebGL 底層技術的封裝，與 HT 其他組件

2019-10-19 19:05:26

原创 分享數百個 HT 工業互聯網的 2D 3D 可視化應用案例

過去的 2018 年，我們認爲是國內工業互聯網可視化的元年，圖撲軟件作爲在工業可視化領域的重度參與者，一線見證了衆多 HTML5/Web 化、2D/3D 化的項目在工業界應用落地，我們覺得有必要在此分享下過去一年，基於 HT 實施的數百個工

2019-10-18 11:15:21 109

原创 基於 HTML5 網絡拓撲圖的快速開發之入門篇（二）

前言 上一篇我們繪製了一個 graphView 場景，在場景之上通過 graphView.dm() 獲取數據容器，並通過 graphView.dm().add() 函數添加了兩個 Node 節點，並通過 setPosition 設置節點位置

2019-10-17 10:35:25

原创 基於 WebGL 實現的 HTML5 3D “彈力”佈局

分子力(molecular force)，又稱分子間作用力、範得瓦耳斯力，是指分子間的相互作用。當二分子相距較遠時，主要表現爲吸引力，這種力主要來源於一個分子被另一個分子隨時間迅速變化的電偶極矩所極化而引起的相互作用；當二分子非常接近時，則

2019-10-16 11:25:26 1

原创 B/S 工業互聯網 地鐵行業

前言 近幾年，互聯網與交通運輸的融合，改變了交易模式，影響着運輸組織和經營方式，改變了運輸主體的市場結構、模糊了運營與非營運的界限，也更好的實現了交通資源的集約共享，同時使得更多依靠外力和企業推動交通信息化成爲可能。互聯網交通具有巨大的潛力

2019-10-15 12:15:28

原创 基於 HTML5 WebGL 的計量站三維可視化監控系統 Web 組態工控應用

得益於 HTML5 WebGL 技術的成熟，從技術上對工控管理的可視化，數據可視化變得簡單易行！完成對工控設備的管理效率，資源管理，風險管理等的大幅度提高，同時也對國家工業4.0計劃作出有力響應！ 如本案例所示，是一個基於 HTML5 We

2019-10-14 10:25:26 1