HT for Web (Hightopo) 使用心得（1）- 基本概念

Hightopo 公司 3D 可視化產(chǎn)品有對(duì)應(yīng)的官方手冊(cè)。但是這些手冊(cè)內(nèi)容比較多。對(duì)于想學(xué)習(xí)的新同學(xué)來說可能相對(duì)比較繁瑣。這里本人根據(jù)個(gè)人使用經(jīng)驗(yàn)做了一些總結(jié)。希望對(duì)讀者有所幫助。

本文會(huì)提到一些前端開發(fā)的概念，如 H5, JavaScript，JSON 等。沒有開發(fā)經(jīng)驗(yàn)的讀者還需要先補(bǔ)一下相關(guān)概念。再繼續(xù)閱讀。

HT for Web，通常簡(jiǎn)稱為 HT，這是一個(gè)基于 JavaScript 開發(fā)的 WebGL 引擎。可用于 2D/3D 可視化開發(fā)，其核心文件只有一個(gè)，就是 ”ht.js”。在 index.html 中使用 script 標(biāo)簽進(jìn)入后便可使用，該文件總共1M左右。

由于其可擴(kuò)展性比較強(qiáng)，因此還提供了一系列插件。比如：連線，動(dòng)畫，obj，右鍵菜單等。在開發(fā)的過程中可根據(jù)需要引入。

該引擎由國(guó)內(nèi) Hightopo 公司自主研發(fā)，是100%的國(guó)產(chǎn)前端可視化引擎。經(jīng)過10多年不斷地迭代優(yōu)化，其無論是在學(xué)習(xí)曲線，開發(fā)效率，還是渲染效果，運(yùn)行性能方面都可圈可點(diǎn)。

該引擎的缺點(diǎn)是目前并不開源，需要商業(yè)授權(quán)才能使用。但是感興趣的開發(fā)者可以從其官網(wǎng)申請(qǐng)免費(fèi)的試用包。該試用包除了包括核心引擎文件，還包括使用手冊(cè)及大量插件。試用包的有效期通常為3個(gè)月，但是到期后我們還可以繼續(xù)申請(qǐng)，不影響后面的使用。下面是我的試用包里面包含的插件：

本章的主要內(nèi)容是先幫大家把 HT for Web 里面的幾個(gè)主要概念捋清楚一下。方便后續(xù)理解。

基礎(chǔ)數(shù)據(jù) - ht.Data

ht.Data 簡(jiǎn)稱 Data，是 HT for Web 中最基礎(chǔ)的數(shù)據(jù)類型（或數(shù)據(jù)元素）。舉個(gè)例子：比如一個(gè)表格有3行數(shù)據(jù)。那么每一行數(shù)據(jù)就可以用一個(gè) Data 來表示。

在 Data 中我們可以存放和配置業(yè)務(wù)數(shù)據(jù)。如上面表格的第一行我們可以用一個(gè) Data 來存放其行數(shù)據(jù)：

let row1 = new ht.Data(); // 新建空白的Data用以存放行數(shù)據(jù)
// 給Data(行數(shù)據(jù))賦值。其中冒號(hào)前為key，后面為顯示的值。
// 至于key如何與表格列數(shù)據(jù)綁定，這個(gè)會(huì)在后面table章節(jié)中敘述。
row1.a({
"empNo": "ht424",
"name": "唐尼",
"sex": "男",
"job": "CEO"
});
let table = new ht.ui.TableView(); // 創(chuàng)建表格

table.dm().add(row1); // 將新建的行數(shù)據(jù)添加到表格中。其中table.dm()為后面要講的數(shù)據(jù)容器

上面代碼中，row1.a() 是 row1.setAttr() 的簡(jiǎn)寫形式。用于將自定義屬性存放到該 Data 中。

在將 Data 存放到 Table 后，如果我們想知道當(dāng)前 Table 總共有多少行，或者想對(duì)每一行的添加，刪除等操作進(jìn)行監(jiān)聽做進(jìn)一步處理該怎么操作？此時(shí)就用到了數(shù)據(jù)模型與選擇模型。

數(shù)據(jù)模型（容器） - ht.DataModel

ht.DataModel 簡(jiǎn)稱 DataModel 或 dm。它是一個(gè)用來存放和管理 ht.Data 的容器。DataModel 也是 HT for Web 中的一個(gè)最基本概念。HT 中的表格，列表，2D 圖紙，3D 場(chǎng)景等都是用的 DataModel 來對(duì)里面的 Data 進(jìn)行管理。因此只要理解了 ht.Data 與 ht.DataModel 的關(guān)系及它們的作用，再使用 HT 各種組件的時(shí)候就會(huì)的心用手。

DataModel 是一個(gè)容器，HT 的不同視圖組件（如：表格，列表，2D 圖紙，3D 場(chǎng)景等）都會(huì)使用DataModel 來對(duì)其下面的 Data 進(jìn)行管理。只不過是在不同的視圖組件上每個(gè) Data 的表現(xiàn)形式不同而已。

每個(gè)視圖組件都會(huì)有 getDataModel() 和 setDataModel() 方法，分別用來獲取和設(shè)置其所用的 DataModel。比如：

let table = new ht.ui.TableView(); // 創(chuàng)建表格
const dm = table.getDataModel(); // 獲取table所用的DataModel
// const dm = table.dm(); // 同上一句，都是獲取table所用的DataModel
// 設(shè)置table的DataModel
const newDM = new ht.DataModel();
table.setDataModel(newDM); // 設(shè)置table的DataModel

// table.dm(newDM); // 同上一句，設(shè)置table的DataModel

為了書寫代碼方便，可以用 dm() 來代替 getDataModel() 和 setDataModel() 方法。如果里面不帶參數(shù)，就是執(zhí)行 getDataModel()，如果帶參數(shù)就是執(zhí)行 setDataModel() 方法。

選擇模型 - ht.SelectionModel

以列表（List）為例，在交互的時(shí)候，使用者可能需要對(duì)列表中的某些行進(jìn)行單選或多選操作。那么該如何處理這些操作？

這里就用到了 HT 的選擇模型 ht.SelectionModel（簡(jiǎn)稱 sm）。

ht.SelectionModel 管理 DataModel 模型中 Data 對(duì)象的選擇狀態(tài)，每個(gè) DataModel 對(duì)象都內(nèi)置一個(gè) SelectionModel(選擇模型)，控制這個(gè) SelectionModel 即可控制所有綁定該 DataModel 的組件的對(duì)象選擇狀態(tài)。

可以通過 dataModel.getSelectionModel() 或 listView.getSelectionModel() 來獲取列表的選擇模型 sm。獲取選擇模型后，可以使用 sm.getSelection() 和 sm.setSelection(datas) 來分別獲取和設(shè)置 Data 的選中狀態(tài)。如：

const sm = dataModel.getSelectionModel(); // 獲取當(dāng)前dataModel的選擇模型

sm.setSelection(data); // 選中某個(gè)Data。假設(shè)該Data已經(jīng)被創(chuàng)建并添加到的dataModel中

視圖組件

視圖組件是顯示給用戶，可用于交互的 HTML 元素。例如我們之前提的表格，2D 圖紙，以及 3D 場(chǎng)景等。由于 HT 對(duì)原生 HTML 元素進(jìn)行了封裝，并且每個(gè)視圖組件都綁定了 DataModel 和 Data，因此，我們只需要通過 JS 代碼來修改 Data 的屬性便可以驅(qū)動(dòng)視圖組件的變化。這套邏輯在各個(gè)視圖組件中使用起來基本一致，因此熟悉這種操作邏輯后，在開發(fā)過程中會(huì)非常方便。

以 3D 場(chǎng)景為例。下面代碼會(huì)在 body 下添加一個(gè) 3D 場(chǎng)景，并且顯示網(wǎng)格線。在添加完場(chǎng)景后，又新建了一個(gè) HT 節(jié)點(diǎn)。

const g3d = new ht.graph3d.Graph3dView(); // 創(chuàng)建一個(gè)3D場(chǎng)景
g3d.setGridVisible(true); // 顯示地面網(wǎng)格
g3d.addToDOM(); // 將3D場(chǎng)景添加到DOM
const dm = g3d.dm(); // 獲取3D場(chǎng)景的DataModel
let node = new ht.Node(); // 新建一個(gè)HT節(jié)點(diǎn)，ht.Node由ht.Data擴(kuò)展而來，其本質(zhì)也是一個(gè)ht.Data
dm.add(node); // 添加該節(jié)點(diǎn)到3D場(chǎng)景中。

const p3 = node.getPosition3d(); // 默認(rèn)位置：[0, 0, 0]

所謂 HT 節(jié)點(diǎn)（ht.Node）實(shí)際上是由 ht.Data 擴(kuò)展出來的一個(gè)類。在 ht.Node 上，其擁有更豐富的屬性定義。如：設(shè)置大小，縮放，旋轉(zhuǎn)角度，位置，貼圖等。在 3D 場(chǎng)景中，每個(gè) HT 節(jié)點(diǎn)都可以用來表示一個(gè) 3D 模型，也可以用來代表一些其他的東西。比如這里我們沒有為其配置屬性，因此其默認(rèn)顯示一個(gè)六面體。

上面示例中我們創(chuàng)建了一個(gè) 3D 場(chǎng)景視圖組件。每個(gè) 3D 場(chǎng)景會(huì)對(duì)應(yīng)又一個(gè) DataModel。在獲取該場(chǎng)景的DataModel 后，我們接著又添加了一個(gè) ht.Node。由于沒有指定位置，因此系統(tǒng)會(huì)將其放到默認(rèn)位置 [0, 0, 0]；

按照上面步驟，當(dāng)我們創(chuàng)建了自己的 3D 場(chǎng)景并添加了許多模型進(jìn)去后，我們會(huì)希望能把這個(gè)場(chǎng)景里面的所有數(shù)據(jù)保存下來便于下次繼續(xù)使用。此時(shí)就用到了序列化與反序列化功能。

序列化與反序列化

序列化和反序列化是HT中的一個(gè)非常重要的概念。序列化可以讓我們把 DataModel 中的數(shù)據(jù)轉(zhuǎn)換成字符串，進(jìn)而保存成文件。而反序列化可以幫助我們把文件還原成 DataModel。由于 DataModel 對(duì)應(yīng)到視圖組件，這樣便可以實(shí)現(xiàn)我們視圖數(shù)據(jù)的保存與恢復(fù)。

在 HT 中，我們可以使用 DataModel 的 serialize() 和 deserialize() 方法來進(jìn)行序列化和反序列化操作。在序列化后，DataModel 數(shù)據(jù)將會(huì)被轉(zhuǎn)換成 JSON 字符串。

const json = dm.serialize(); // 序列化

dm.deserialize(json); // 反序列化

如上例中的 3D 場(chǎng)景，我們對(duì)其序列化后得到的 JSON 字符串如下：

{
"v": "7.7.1",
"p": {
"autoAdjustIndex": true,
"hierarchicalRendering": false,
"postProcessingData": {
"huesaturation": {
"hue": [0, 0, 0, 0, 0, 0, 0],
"saturation": [0, 0, 0, 0, 0, 0, 0],
"lightness": [0, 0, 0, 0, 0, 0, 0]
},
"bloom": {},
"glitch": {}
}
},
"d": [{
"c": "ht.Node",
"i": 6
}]
}

這里的 JSON 數(shù)據(jù)格式是 Hightopo 自定義格式。為了節(jié)省空間，其每個(gè)屬性都使用了簡(jiǎn)寫形式。我們一般不需要對(duì)其進(jìn)行修改。

小結(jié)

本章主要介紹了 HT for Web 中的一些基本概念，包括：基礎(chǔ)數(shù)據(jù) ht.Data、數(shù)據(jù)模型 ht.DataModel 和選擇模型 ht.SelectionModel、視圖組件以及序列化和反序列化。這些概念是 HT for Web 中最基礎(chǔ)的概念，幾乎在每次開發(fā)過程中都會(huì)用到。掌握它們的功能以及其互相之間的邏輯之后，對(duì)于后續(xù)的開發(fā)以及理解 HT for Web 的各個(gè)組件操作邏輯都有著非常重要的作用。

審核編輯 黃宇