关于前端:HT-for-Web-Hightopo-使用心得1-基本概念

7次阅读

共计 4087 个字符，预计需要花费 11 分钟才能阅读完成。

Hightopo 公司 3D 可视化产品有对应的官网手册。然而这些手册内容比拟多。对于想学习的新同学来说可能绝对比拟繁琐。这里自己依据集体应用教训做了一些总结。心愿对读者有所帮忙。

本文会提到一些前端开发的概念，如 H5, JavaScript，JSON 等。没有开发教训的读者还须要先补一下相干概念。再持续浏览。

HT for Web，通常简称为 HT，这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发，其外围文件只有一个，就是”ht.js”。在 index.html 中应用 script 标签进入后便可应用，该文件总共 1M 左右。

<body>
<script src="lib/core/ht.js"></script>
</body>

因为其可扩展性比拟强，因而还提供了一系列插件。比方：连线，动画，obj，右键菜单等。在开发的过程中可依据须要引入。

该引擎由国内 Hightopo 公司自主研发，是 100% 的国产前端可视化引擎。通过 10 多年一直地迭代优化，其无论是在学习曲线，开发效率，还是渲染成果，运行性能方面都可圈可点。

该引擎的毛病是目前并不开源，须要商业受权能力应用。然而感兴趣的开发者能够从其官网申请收费的试用包。该试用包除了包含外围引擎文件，还包含使用手册及大量插件。试用包的有效期通常为 3 个月，然而到期后咱们还能够持续申请，不影响前面的应用。上面是我的试用包外面蕴含的插件：

本章的次要内容是先帮大家把 HT for Web 外面的几个次要概念捋分明一下。不便后续了解。

ht.Data 简称 Data，是 HT for Web 中最根底的数据类型（或数据元素）。举个例子：比方一个表格有 3 行数据。那么每一行数据就能够用一个 Data 来示意。

在 Data 中咱们能够寄存和配置业务数据。如下面表格的第一行咱们能够用一个 Data 来寄存其行数据：

let row1 = new ht.Data(); // 新建空白的 Data 用以寄存行数据

// 给 Data(行数据) 赋值。其中冒号前为 key，前面为显示的值。// 至于 key 如何与表格列数据绑定，这个会在前面 table 章节中叙述。row1.a({
  "empNo": "ht424",
  "name": "唐尼",
  "sex": "男",
  "job": "CEO"
});
let table = new ht.ui.TableView(); // 创建表格
table.dm().add(row1); // 将新建的行数据增加到表格中。其中 table.dm() 为前面要讲的数据容器

下面代码中，row1.a() 是 row1.setAttr() 的简写模式。用于将自定义属性寄存到该 Data 中。

在将 Data 寄存到 Table 后，如果咱们想晓得以后 Table 总共有多少行，或者想对每一行的增加，删除等操作进行监听做进一步解决该怎么操作？此时就用到了数据模型与抉择模型。

ht.DataModel 简称 DataModel 或 dm。它是一个用来寄存和治理 ht.Data 的容器。DataModel 也是 HT for Web 中的一个最基本概念。HT 中的表格，列表，2D 图纸，3D 场景等都是用的 DataModel 来对外面的 Data 进行治理。因而只有了解了 ht.Data 与 ht.DataModel 的关系及它们的作用，再应用 HT 各种组件的时候就会的心用手。

DataModel 是一个容器，HT 的不同视图组件（如：表格，列表，2D 图纸，3D 场景等）都会应用 DataModel 来对其上面的 Data 进行治理。只不过是在不同的视图组件上每个 Data 的表现形式不同而已。

每个视图组件都会有 getDataModel() 和 setDataModel() 办法，别离用来获取和设置其所用的 DataModel。比方：

let table = new ht.ui.TableView(); // 创建表格
const dm = table.getDataModel(); // 获取 table 所用的 DataModel
// const dm = table.dm(); // 同上一句，都是获取 table 所用的 DataModel

// 设置 table 的 DataModel
const newDM = new ht.DataModel();
table.setDataModel(newDM); // 设置 table 的 DataModel
// table.dm(newDM); // 同上一句，设置 table 的 DataModel

为了书写代码不便，能够用 dm() 来代替 getDataModel() 和 setDataModel() 办法。如果外面不带参数，就是执行 getDataModel()，如果带参数就是执行 setDataModel() 办法。

以列表（List）为例，在交互的时候，使用者可能须要对列表中的某些行进行单选或多选操作。那么该如何解决这些操作？

这里就用到了 HT 的抉择模型 ht.SelectionModel（简称 sm）。

ht.SelectionModel 治理 DataModel 模型中 Data 对象的抉择状态，每个 DataModel 对象都内置一个 SelectionModel(抉择模型)，管制这个 SelectionModel 即可管制所有绑定该 DataModel 的组件的对象抉择状态。

能够通过 dataModel.getSelectionModel() 或 listView.getSelectionModel() 来获取列表的抉择模型 sm。获取抉择模型后，能够应用 sm.getSelection() 和 sm.setSelection(datas) 来别离获取和设置 Data 的选中状态。如：

const sm = dataModel.getSelectionModel(); // 获取以后 dataModel 的抉择模型
sm.setSelection(data); // 选中某个 Data。假如该 Data 曾经被创立并增加到的 dataModel 中

视图组件是显示给用户，可用于交互的 HTML 元素。例如咱们之前提的表格，2D 图纸，以及 3D 场景等。因为 HT 对原生 HTML 元素进行了封装，并且每个视图组件都绑定了 DataModel 和 Data，因而，咱们只须要通过 JS 代码来批改 Data 的属性便能够驱动视图组件的变动。这套逻辑在各个视图组件中应用起来基本一致，因而相熟这种操作逻辑后，在开发过程中会十分不便。

以 3D 场景为例。上面代码会在 body 下增加一个 3D 场景，并且显示网格线。在增加完场景后，又新建了一个 HT 节点。

const g3d = new ht.graph3d.Graph3dView(); // 创立一个 3D 场景
g3d.setGridVisible(true); // 显示高空网格
g3d.addToDOM(); // 将 3D 场景增加到 DOM

const dm = g3d.dm(); // 获取 3D 场景的 DataModel

let node = new ht.Node(); // 新建一个 HT 节点，ht.Node 由 ht.Data 扩大而来，实质也是一个 ht.Data
dm.add(node); // 增加该节点到 3D 场景中。const p3 = node.getPosition3d(); // 默认地位：[0, 0, 0]

所谓 HT 节点（ht.Node）实际上是由 ht.Data 扩大进去的一个类。在 ht.Node 上，其领有更丰盛的属性定义。如：设置大小，缩放，旋转角度，地位，贴图等。在 3D 场景中，每个 HT 节点都能够用来示意一个 3D 模型，也能够用来代表一些其余的货色。比方这里咱们没有为其配置属性，因而其默认显示一个六面体。

下面示例中咱们创立了一个 3D 场景视图组件。每个 3D 场景会对应又一个 DataModel。在获取该场景的 DataModel 后，咱们接着又增加了一个 ht.Node。因为没有指定地位，因而零碎会将其放到默认地位 [0, 0, 0]；

依照下面步骤，当咱们创立了本人的 3D 场景并增加了许多模型进去后，咱们会心愿能把这个场景外面的所有数据保留下来便于下次持续应用。此时就用到了序列化与反序列化性能。

序列化和反序列化是 HT 中的一个十分重要的概念。序列化能够让咱们把 DataModel 中的数据转换成字符串，进而保留成文件。而反序列化能够帮忙咱们把文件还原成 DataModel。因为 DataModel 对应到视图组件，这样便能够实现咱们视图数据的保留与复原。

在 HT 中，咱们能够应用 DataModel 的 serialize() 和 deserialize() 办法来进行序列化和反序列化操作。在序列化后，DataModel 数据将会被转换成 JSON 字符串。

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

如上例中的 3D 场景，咱们对其序列化后失去的 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 数据格式是 Hightopo 自定义格局。为了节俭空间，其每个属性都应用了简写模式。咱们个别不须要对其进行批改。

本章次要介绍了 HT for Web 中的一些基本概念，包含：根底数据 ht.Data、数据模型 ht.DataModel 和抉择模型 ht.SelectionModel、视图组件以及序列化和反序列化。这些概念是 HT for Web 中最根底的概念，简直在每次开发过程中都会用到。把握它们的性能以及其相互之间的逻辑之后，对于后续的开发以及了解 HT for Web 的各个组件操作逻辑都有着十分重要的作用。

正文完