html导入3d模型_基于 HTML5 Canvas 点击添加 2D 3D 机柜模型-CSDN博客

本文链接：https://blog.csdn.net/weixin_42132354/article/details/113077617

这篇博客展示了如何使用HTML5 Canvas结合DataModel进行2D和3D机柜模型的导入与点击交互。通过监听DataModel的属性变化、增删事件及选中变化事件，实现了在界面上的动态更新。文中提供了具体的代码示例和事件处理解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天好好地消化了一下我们的数据容器 DataModel，这里给初学者做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。

为了让这个例子具现化，我将这个简单的例子做了一点改动，下面我会一一解释。

例子地址：http://hightopo.com/guide/guide/core/datamodel/examples/example_datamodel.html

这是我改造之后的模样，将 dataModel 数据容器共享，通过对数据容器的增删事件的监听得到的现在的结果，并且在显示上做了一点“手脚”。下面我们从头解析这例子，你们会知道为什么我特地将这个简单的例子提出来。

首先，我们得创建场景将作为基础，整个场景我算是分为三个部分，顶部工具栏，2D 部分以及 3D 部分。顶部工具栏部分使用的纯 HTML 写的：

<button onclick="addData()">Add</button>
<button onclick="removeData()">Remove</button>
<button onclick="clearDataModel()">Clear</button>
<span id="property" class="output"></span>
<span id="model" class="output"></span>
<span id="selection" class="output"></span>

因为有点击事件，所以我们直接在 button 按钮上进行，后面的 span 标签显示纯文本内容。

我们知道，HT 的所有组件都是基于一个根部 div 的，要将这个 div 部署到 html 页面上很简单，但是 HT 内部对这个 div 设置了绝对定位，所以我们在添加这个 div 进 HTML 页面中时，也要设置绝对定位中的位置，我在页面中添加了一个 div，将 HT 的部分都添加进这个 div 中：