Chinaunix首页 | 论坛 | 博客

xhload3d

首页　| 　博文目录　| 　关于我

xhload3d

  • 博客访问： 954099
  • 博文数量： 110
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 1997
  • 用 户 组： 普通用户
  • 注册时间： 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文（110）

文章存档

2020年（1）

2018年（28）

2017年（21）

2016年（10）

2015年（28）

2014年（19）

2013年（3）

我的朋友
最近访客
推荐博文
基于HTML5 Canvas的CSG构造实体几何书架

分类： HTML5

2017-11-08 08:07:02


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

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

本例 Demo 地址： 

先来看下效果图：

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


  1. dm = new ht.DataModel();// 数据模型
  2. treeView = new ht.widget.TreeView(dm); //树组件
  3. gv1 = new ht.graph3d.Graph3dView(dm); //3D 组件
  4. gv2 = new ht.graph3d.Graph3dView(dm);
  5. splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件
  6. mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);
  7.                 
  8. view = mainSplit.getView();
  9. view.className = 'main';
  10. document.body.appendChild(view);
  11. window.addEventListener('resize', function (e) {
  12.     mainSplit.invalidate();
  13. }, false);


上面代码是一种非常常见的在 HTML 中添加 HT 组件的方法，详情可参考 组件章节。这种方法进行添加 HT 组件有一个需要注意的点，因为 HT 一般都以设置 position 为 absolute 的绝对定位方式，必须设置 left、right、top、bottom 等等基础 css 样式，像这样：

  1. .main {
  2.      margin: 0px;
  3.      padding: 0px;
  4.      position: absolute;
  5.      top: 0px;
  6.      bottom: 0px;
  7.      left: 0px;
  8.      right: 0px;
  9. }


所以为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其思想逻辑如下，其中 iv 是 invalidate 的缩写：
  1. addToDOM = function(){
  2.     var self = this,
  3.     view = self.getView(),
  4.     style = view.style;
  5.     document.body.appendChild(view);
  6.     style.left = '0';
  7.     style.right = '0';
  8.     style.top = '0';
  9.     style.bottom = '0';
  10.     window.addEventListener('resize', function () { self.iv(); }, false);
  11. }

以后我们在代码中就可以直接调用 addToDOM 函数，而不用写一大堆代码了，上面代码用 addToDOM 取代之后的代码如下，而且不用描绘 css 样式： 

  1. dm = new ht.DataModel();// 数据模型
  2. treeView = new ht.widget.TreeView(dm); //树组件
  3. gv1 = new ht.graph3d.Graph3dView(dm); //3D 组件
  4. gv2 = new ht.graph3d.Graph3dView(dm);
  5. splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件
  6. mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);
  7. mainSplit.addToDOM();


界面分配好之后我们就要对其添加内容了，界面的左边部分是 HT 封装的树组件，我在之前的文章写到过，树组件是一个非常方便的绘制树形关系的组件，开发人员能够轻松地从数据模型 DataModel 中获取数据和节点之间的关系放到树上，只需要在树组件声明的过程中，将对应的数据模型 DataModel 放进树组件的参数即可，当然我们还扩展了很多跟树组件有关的函数，非常方便实用，这里我们只用了 expandAll 函数，将所有对象展开：

  1. treeView = new ht.widget.TreeView(dm); //树组件
  2. treeView.expandAll();


右边部分上下分为两部分，都是 3D 场景，就是设置显示有点不同，其他完全相同，上面的 3D 场景重载了 getVisibleFunc 函数，如果元素的 showMe 属性为 true，则可视；如果节点为 ht.CSGNode 类型并且节点的 getHost 函数的参数为空，则不可视；其他情况均可视：

  1. gv1.setVisibleFunc(function(data){
  2.     if(data.showMe){
  3.         return true;
  4.     }
  5.     if(data instanceof ht.CSGNode && data.getHost()){
  6.         return false;
  7.     }
  8.     return true;
  9. });


我们先向 3D 场景中添加元素对象，我们先解释中间的书架，对两边的书架有缺的再进行补充。首先我们添加了一个 ht.CSGNode 节点 shelf，作为书架的主节点，其他的节点都是依附于这个节点的，对这个节点设置了位置、大小、名称以及六个面的颜色，然后添加进数据模型 DataModel： 

  1. var shelf = new ht.CSGNode();
  2. shelf.s3(500, 400, 120);
  3. shelf.p3(0, 200, 0);
  4. shelf.setName('shelf1');
  5. shelf.s({
  6.     'all.color': '#E5BB77'
  7. });
  8. dm.add(shelf);


接着向这个 shelf 中添加 10 个节点，做书架的格子效果，并设置依附关系和父子关系添加进数据模型中：
  1. for(var i=0; i<2; i++){
  2.     for(var j=0; j<5; j++){
  3.         var clipNode = new ht.CSGNode();
  4.         clipNode.setHost(shelf);
  5.         clipNode.s3(80, 100, 120);
  6.         clipNode.p3(-200+j*100, 340-i*120, 20);
  7.         clipNode.setName('substract-'+i+'-'+j);
  8.         clipNode.s('batch', 'tt');
  9.         clipNode.setParent(shelf);
  10.         dm.add(clipNode);
  11.     }
  12. }

为了让书架变得更美观一点，我们在书架的上下左右都加上了 ht.CSGNode，最后为了更加具象化，我们还添加了一本书，实现方式也差不多，都非常简单：

  1. var book = new ht.Node();
  2. book.setName('CSS3: The Missing Manual');
  3. book.s3(60, 80, 8);
  4. book.p3(-100, 210, 20);
  5. book.r3(-Math.PI/6, Math.PI/5, 0);
  6. book.setIcon('book');
  7. book.s({
  8.     'front.image': 'book',
  9.     'back.color': 'white',
  10.     'left.color': 'white',
  11.     'all.color': 'gray'
  12. });
  13. book.setHost(shelf);
  14. book.setParent(shelf);
  15. dm.add(book);


接着左边的书架也是类似的构建方法，有一点不同的是，这边有一个 ht.CSGBox 类型，继承于 ht.CSGNode，其除具备父类 CSGNode 的挖空等功能外，还可对六个面进行旋转展开关闭的操作，这里我们的节点只设置了前面的能够旋转展开，并且设置了一系列的样式：
  1. clipNode = new ht.CSGBox();
  2. clipNode.setName('CSGBox-Expand-Left');
  3. clipNode.s3(100, 100, 120);
  4. clipNode.p3(0, 65, 0.1);
  5. clipNode.setHost(shelf);
  6. clipNode.showMe = true;
  7. clipNode.s({
  8.     'all.visible': false,//6面均不可见
  9.     'front.visible': true,//前面可见
  10.     'front.toggleable': true,//允许前面双击展开
  11.     'front.reverse.flip': true,//前面的反面显示正面的内容
  12.     'front.transparent': true,//前面透明
  13.     'front.end': Math.PI * 0.7,//前面展开状态的结束旋转弧度
  14.     'front.color': 'rgba(0, 50, 50, 0.7)'//前面颜色
  15. });
可能你们还想知道下面的地球是怎么做到的？还记得之前的文章写到过 HT 中设置了 shape3d 属性，设置这个属性实际上就是在操作 setShape3dModel(name, model) 和 getShape3dModel(name)，可以通过这个属性设置为 box|sphere|cylinder|cone|torus|star|rect|roundRect|triangle|rightTriangle|parallelogram|trapezoid 等等模型，这些模型也都是 HT 封装好的，要使用时直接设置 shape3d 为其中的一个值即可，如这个例子中用到 “shape3d: sphere” 就是设置为球体。我们简单地用一张地图图片包裹在这个球体的外侧，当然，这张地图图片是先通过 ht.Default.setImage 注册过的，然后通过 shape3d.image 将图片附到这个节点上：
  1. earth = new ht.Node();
  2. earth.setName('earth');
  3. earth.s3(70, 70, 70);
  4. earth.p3(0, 50, 0);
  5. earth.s({
  6.     'shape3d': 'sphere',
  7.     'shape3d.image': 'earth'
  8. });
  9. earth.setHost(shelf);
  10. earth.setParent(shelf);
  11. dm.add(earth);

右边的书架，同样也是有一个主节点，其他节点依附于它，但是我们看到这边换了一个新的节点类型 ht.DoorWindow，ht.DoorWindow继承于 ht.CSGNode，其除具备父类 CSGNode 的挖空等功能外，还可进行整体的旋转展开关闭的操作， 常用于作为门或窗的业务对象，吸附于 CSGNode 或 CSGShape 的 host 作为墙面的图元。这个节点类型就是 ht.CSGNode 的延展，相对来说就是区分了实际应用而添加了不同的 style 参数，更多的属性请到  查看然后添加到节点中玩玩：

  1. photos = new ht.DoorWindow();
  2. photos.setName('DoorWindow-Photos');
  3. photos.setIcon('ben12');
  4. photos.s3(110, 100, 130);
  5. photos.p3(5, 180, 0);
  6. photos.setHost(shelf);
  7. photos.showMe = true;
  8. photos.s({
  9.     'bottom.uv': [1,1, 1,0, 0,0, 0,1],
  10.     'bottom.uv.scale': [1, 1],
  11.     'left.uv.scale': [3, 3],
  12.     'top.uv.scale': [2, 2],
  13.     'dw.s3': [0.8, 0.9, 0.05],
  14.     'dw.t3': [0, -5, 0],
  15.     'dw.axis': 'v',
  16.     'dw.toggleable': false,
  17.     'front.image': 'ben1',
  18.     'back.image': 'ben2',
  19.     'all.color': '#F8CE8B'
  20. });
  21. photos.setParent(shelf);
  22. dm.add(photos);


最后，我们将左侧的地球 earth 和右侧的照片 photo 旋转起来：
  1. var angle = 0;
  2. setInterval(function(){
  3.     angle += Math.PI/40;
  4.     earth.r3(0, angle, 0);
  5.     photos.s('dw.angle', angle);
  6. }, 50);
    1. var angle = 0;
    2. setInterval(function(){
    3.     angle += Math.PI/40;
    4.     earth.r3(0, angle, 0);
    5.     photos.s('dw.angle', angle);
    6. }, 50);

我们看到，其实虽然 HT 封装了很多不同的 CSG 节点类型，但是实际应用都差不多，而且内容也没有差特别多，差别都是在 style 参数上，但是真的在实际开发中，这种区分就会很大程度上加快开发速度，毕竟名称一目了然，就知道要运用哪些 style 属性了。




阅读(1102) | 评论(0) | 转发(0) |
0

上一篇：工控SCADA模型 基于HTML5 Canvas WebGL制作摩托车

下一篇：玩转 HTML5 下 WebGL 的 3D 模型交并补

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6