基于HTML5 Canvas的CSG构造实体几何书架

CSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了，最简单的实体表示叫作体元，通常是形状简单的物体，如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同，在一些软件包中可以使用弯曲的物体进行 CSG 处理，在另外一些软件包中则不支持这些功能。构造物体就是将体元根据集合论的布尔逻辑组合在一起，这些运算包括：并集、交集以及补集。我们一般可以用 CSG 来将简单的模型合在一起生成复杂的模型，这样在构造模型的时候会省很多力。

HT 中的 ht.CSGNode 图元类型就是参考 CSG 封装的一个函数，ht.CSGNode 继承于 ht.Node，当 style 的 shape3d 属性为空时显示为六面体效果，CSGNode如果通过 setHost 吸附到 宿主 CSGNode 或 CSGShape 后，宿主 CSGNode 或 CSGShape 可与吸附的CSGNode图元进行CSG的组合建模。详情请参考 HT for Web 建模手册 CSGNode 章节。这里我用 CSG 的概念写了一个例子，让大家能更好地理解这个概念。

本例 Demo 地址： http://hightopo.com/guide/guide/plugin/modeling/examples/example_bookshelf.html

先来看下效果图：

从上面效果图可以看到，我们将界面分为三个部分，这三个部分先是右边部分上下分割，然后将整个界面左右分割，HT 用封装好的 ht.widget.SplitView 进行界面的分割，然后将分割组件添加进底层 div 中：

dm = new ht.DataModel();// 数据模型            
treeView = new ht.widget.TreeView(dm); //树组件