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

news2025/1/13 10:18:57

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

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

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() 方法。

选择模型 - ht.SelectionModel

以列表（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 的各个组件操作逻辑都有着非常重要的作用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/998807.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【linux input子系统-01】核心层、事件处理层、设备驱动层

【linux input子系统-01】核心层、事件处理层、设备驱动层

简介 input子系统的三层&#xff1a; 核心层&#xff1a;为事件处理层、设备驱动层提供接口&#xff0c;并在input_handler和input_dev之间建立关联&#xff1b;事件处理层&#xff1a;内核对象对应input_handler&#xff0c;用于接收-解析-处理设备驱动层上报的输入事件&…
阅读更多...
借助VScode将 Docker 容器用作开发环境

借助VScode将 Docker 容器用作开发环境

参考 借助 Visual Studio Code 将 Docker 容器用作开发环境 - Training | Microsoft Learn 存在的问题 Remote-SSH XHR failed无法访问远程服务器 【VScode】Remote-SSH XHR failed无法访问远程服务器_SuperSources的博客-CSDN博客 可能是网络问题&#xff0c;打开vpn 就可以正…
阅读更多...
探索GreatADM：如何快速定义监控

探索GreatADM：如何快速定义监控

引文 在数据库运维过程中&#xff0c;所使用的运维管理平台是否存在这样的问题&#xff1a; 1、默认监控粒度不够,业务需要更细颗粒度的监控数据。2、平台默认的监控命令不适合,需要调整阈值量身定制监控策略。3、不同类型的实例或组件需要有不同的监控重点,但管理平台监控固…
阅读更多...
【云原生】kubectl常用命令大全

【云原生】kubectl常用命令大全

目录 一、资源管理方法 kubectl 的命令大全 二、 kubectl常用命令大全 2.2 项目的生命周期&#xff1a;创建-->发布-->更新-->回滚-->删除 1、创建 kubectl create命令 2、发布 kubectl expose命令 3、更新 kubectl set 4、回滚 kubectl rollou…
阅读更多...
什么是实时监控系统？

什么是实时监控系统？

监控报警器在工业生产和电子行业中广泛应用。其中包括数据收发器、多功能监控报警器、人体接地监控器、手腕带监控报警器等等。 通过网络把“静电监测设备”、“接地监控报警器”、“数据转换器”、“计算机”等设备连接起来&#xff0c;连接成一个完整的静电实时监控系统。缺一…
阅读更多...
u盘制成系统盘之后如何让恢复普通盘

u盘制成系统盘之后如何让恢复普通盘

U盘装完pe后怎么还原成普通U盘 1.插入U盘&#xff0c;按WindowsR 输入diskpart 2.输入“list disk”回车&#xff0c;查看U盘代号&#xff0c;例如下图里我的U盘代号是磁盘1&#xff08;你的不一定是1&#xff0c;一定要分清楚&#xff09; 3.输入“select disk 2”选中U盘磁…
阅读更多...
2 亿 + 数据打开方式：人工智能数字疗法

2 亿 + 数据打开方式：人工智能数字疗法

你今天真好看 APP:您好&#xff0c;我们目前是一个大学生创新项目团队&#xff0c;内容为针对青少年痤疮问题的「人工智能数字疗法」。目前正在进行 AI 诊断模型的训练&#xff0c;看到您产品的信息并且开放了数据库&#xff0c;我们想知道&#xff1a;如何才能使用贵公司的数据…
阅读更多...
PDF文件太大怎么办？三招教会你PDF文件压缩

PDF文件太大怎么办？三招教会你PDF文件压缩

PDF文件太大怎么办&#xff1f;这是许多人在处理PDF文件时遇到的问题。为了帮助大家解决这个问题&#xff0c;下面总结了三个可以解决PDF文件过大问题的方法&#xff0c;需要的朋友抓紧来看看吧~ 方法一&#xff1a;使用嗨格式压缩大师 嗨格式压缩大师是一款功能强大的PDF压缩…
阅读更多...
蓝牙资讯|苹果计划为AirPods耳机带来体温测量、听力测试功能

蓝牙资讯|苹果计划为AirPods耳机带来体温测量、听力测试功能

彭博社马克・古尔曼透露&#xff0c;苹果计划最早在 2024 年为 AirPods 和 AirPods Max 带来 USB-C 端口古尔曼称&#xff0c;该公司显然正在努力将其所有基于 Lightning 接口的配件改用 USB-C 接口。其中&#xff0c;AirPods Pro 将率先改用新接口&#xff0c;该产品将与 iPho…
阅读更多...
php webuploader 大文件上传带进度条

php webuploader 大文件上传带进度条

1&#xff0c;先下载百度的webuploader js上传框架 链接&#xff1a;https://pan.baidu.com/s/1Kxct0rIkasuTWv_jIzZkRA 提取码&#xff1a;c9q7 index.html <!DOCTYPE html> <html><head><meta charset"utf-8"><title></…
阅读更多...
asp.net+sqlserver+c#学生作品展示及评分系统

asp.net+sqlserver+c#学生作品展示及评分系统

&#xff08;1&#xff09;基本框架&#xff1a;登陆、作品浏览、作品评分、作品查询、作品管理 &#xff08;2&#xff09;模块管理&#xff1a; ①登录模块&#xff1a;注册、登陆、退出 ②作品浏览&#xff1a;查看展示作品 ③作品管理&#xff1a;增加、删除&#xff0c;修…
阅读更多...
谷沁清益生菌清口含片，守护口腔健康的第一道防线

谷沁清益生菌清口含片，守护口腔健康的第一道防线

根据第四次全国口腔健康流行病学调查显示&#xff0c;我国有高达97%的成人遭受口腔问题困扰。 在2022年发布的《全民口腔健康计划》口腔健康白皮书中&#xff0c;民众尤为突出的口腔问题为龋齿、牙周病。其中龋齿患病率高达67.5%&#xff0c;牙周疾病紧随其后&#xff0c;患病…
阅读更多...
[开学季]ChatPaper全流程教程

[开学季]ChatPaper全流程教程

文章目录 1. 粗筛&#xff1a;论文全文总结1.1 使用步骤&#xff1a; 1.2 功能描述&#xff1a;2. 论文问答&#xff1a;2. 精读&#xff1a;学术版GPT的论文翻译2.0 论文精读的正确姿势2.1 使用场景1&#xff1a;arxiv论文完美翻译2.2 本地PDF全文翻译&#xff1a;2.3 关于免费…
阅读更多...
电容笔值不值得买？开学季比较好用的电容笔

电容笔值不值得买？开学季比较好用的电容笔

眼看着新学期即将到来&#xff0c;到底应该选择什么样的电容笔&#xff1f;一款原装的苹果Pencil&#xff0c;就卖到了将近一千块&#xff0c;这对于很多人来说&#xff0c;都是一个十分昂贵的价格。事实上&#xff0c;由于平替电容笔的价格非常便宜&#xff0c;只要一二百元就…
阅读更多...
PowerBI - 匹配并从另一个表中获取值

PowerBI - 匹配并从另一个表中获取值

我有 2 个表通过列 A 相互连接。我想将列 C 与列 A 匹配并获得列 B 的值。 DAX 函数是 LOOKUPVALUE . MatchedOutput LOOKUPVALUE(Table2[ColB],Table2[ColA],Table1[ColC])这将查找 Table2[ColB] 中的值哪里Table2[ColA]匹配 Table1[ColC] .
阅读更多...
vue中v-for循环数组使用方法中splice删除数组元素（错误：每次都删掉点击的下面的一项）

vue中v-for循环数组使用方法中splice删除数组元素（错误：每次都删掉点击的下面的一项）

总结&#xff1a;平常使用v-for的key都是使用index&#xff0c;这里vue官方文档也不推荐&#xff0c;这个时候就出问题了&#xff0c;我们需要key为唯一标识&#xff0c;这里我使用了时间戳&#xff08;new Date().getTime()&#xff09;处理比较复杂的情况&#xff0c; 本文章…
阅读更多...
string类的模拟实现——模拟的技巧

string类的模拟实现——模拟的技巧

前言 对于学习STL而言&#xff0c;最重要的手段之一就是亲手模拟实现一个自己的容器。string存储只为char类型&#xff0c;且操作上并没有很难的操作。因此对于初学者而言&#xff0c;string是一个很好的练手项目。 一、确定思路 虽说相对适合初学者模拟实现&#xff0c;但是…
阅读更多...
.net 7 隐藏swagger的api

.net 7 隐藏swagger的api

1.写一个隐藏接口特性表示 using Microsoft.AspNetCore.Mvc.ApiExplorer; using Microsoft.OpenApi.Models; using Swashbuckle.AspNetCore.SwaggerGen;using System.Web.Http.Description;namespace JiaTongInterface.Filter {public class SwaggerApi : Swashbuckle.AspNet…
阅读更多...
信息系统项目管理教程（第4版）：第二章 信息技术及其发展

信息系统项目管理教程（第4版）：第二章 信息技术及其发展

请点击↑关注、收藏&#xff0c;本博客免费为你获取精彩知识分享&#xff01;有惊喜哟&#xff01;&#xff01; 第二章 信息技术及其发展 2.1信息技术及其发展 信息技术是以微电子学为基础的计算机技术和电信技术的结合而形成的&#xff0c;对声音的、图像的、文字的、数字…
阅读更多...
觉非科技数据闭环系列 | BEV感知研发实践

觉非科技数据闭环系列 | BEV感知研发实践

随着自动驾驶迈向量产场景&#xff0c;“BEV感知数据闭环”已成为新一代自动驾驶量产系统的核心架构。数据成为了至关重要的技术驱动力&#xff0c;发挥数据闭环的飞轮效应或将成为下半场从1到N的胜负关键。 觉非科技在此方面已进行了大量的研究工作&#xff0c;并在实际量产项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023