构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算,将立方体、圆柱体和棱柱等简单的基础模型,嵌套组合成更复杂三维模型。
CSG的算法这些年来已有各种语言平台版本实现,C++版主流的是 http://opencsg.org/ 已有众多基于该开源类库的应用案例,JavaScript语言较早版实现 http://evanw.github.io/csg.js/ 影响较广,很多其他js衍生版都是基于该版本进行改进完善,包括Java版的实现 https://github.com/miho/JCSG ,可参考基于JavaFX的3D打印IDE https://github.com/miho/JFXScad ,提起JavaFX视乎这些年完全消失在程序员视野毫无声息,但还是有一群拥护者持续在使用着如今地位有点尴尬的JavaFX。
回到我们今天要搞的3D书架例子,我们将基于HT for Web的3D引擎来实现,HT已经内置了CSG功能的模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作,一般运用中裁剪的方式较为常用,因此CSGNode默认对Host图元的操作就是裁剪。
上图的例子效果可看出我们构建了一个DataModel数据模型,该模型绑定了一个TreeView树组件和两个Graph3dView的三维组件,上部分的Graph3dView组件添加了VisibleFunc的可见过滤器,隐藏了如下部分的Graph3dView中蓝色立方体图元,这些蓝色立方体图元就是CSGNode,其作用就是用来裁剪其吸附的书架Shelf对象,因此一般在3D编辑器状态下才需要出现,运行时科如上部分Graph3dView组件那样,通过添加可见过滤器将其隐藏,这样就实现了有凹槽可摆放书籍内容的3D书架效果,本例我们作为示例仅放了一本《CSS3 The Missing Manual》,这本书其实是由一个六面体,front面显示了书籍贴图,然后旋转一定角度进行摆放,btw《CSS3 The Missing Manual》第三版是本很不错的CSS书籍,强烈推荐!
书架两边分别摆放了两个不同风格的小书台,通过上图我拖拽改变了蓝色CSGNode图元的位置,大家通过两张图的对比能更直观的体会到CSG的操作效果,玻璃门开关以及相册效果都是直接利用HT for Web的3D引擎提供的模型,通过设置透明度、相片贴图和旋转动画等呢只功能参数即可。
以下是该HT for Web的3D例子的所有JavaScript代码供参考:http://v.youku.com/v_show/id_XODU2MTQ4NjI4.html
ht.Default.setImage('ben12', { width: 100, height: 50, comps: [ { type: 'image', name: 'ben1', rect: [0, 0, 50, 50] }, { type: 'image', name: 'ben2', rect: [50, 0, 50, 50] } ] }); function init(){ dm = new ht.DataModel(); treeView = new ht.widget.TreeView(dm); gv1 = new ht.graph3d.Graph3dView(dm); gv2 = new ht.graph3d.Graph3dView(dm); splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6); mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27); view = mainSplit.getView(); view.className = 'main'; document.body.appendChild(view); window.addEventListener('resize', function (e) { mainSplit.invalidate(); }, false); gv1.setMoveStep(30); gv1.setGridVisible(true); gv1.setEye(0, 100, 1000); gv1.setCenter(0, 200, 0); gv1.pan(0, 100, true); gv1.getLabel = function(){ return null; }; gv1.getBrightness = function(data){ return null; }; gv1.setVisibleFunc(function(data){ if(data.showMe){ return true; } if(data instanceof ht.CSGNode && data.getHost()){ return false; } return true; }); gv2.setMoveStep(30); gv2.setEditable(true); gv2.setGridVisible(true); gv2.setEditable(true); gv2.pan(0, 200, true); gv2.getLabel = function(){ return null; }; initShelf1(); initShelf2(); initShelf3(); treeView.expandAll(); var angle = 0; setInterval(function(){ angle += Math.PI/40; earth.r3(0, angle, 0); photos.s('dw.angle', angle); }, 50); } function initShelf1(){ var shelf = new ht.CSGNode(); shelf.s3(500, 400, 120); shelf.p3(0, 200, 0); shelf.setName('shelf1'); shelf.s({ 'all.color': '#E5BB77' }); dm.add(shelf); for(var i=0; i<2; i++){ for(var j=0; j<5; j++){ var clipNode = new ht.CSGNode(); clipNode.setHost(shelf); clipNode.s3(80, 100, 120); clipNode.p3(-200+j*100, 340-i*120, 20); clipNode.setName('substract-'+i+'-'+j); clipNode.s('batch', 'tt'); clipNode.setParent(shelf); dm.add(clipNode); } } var leftNode = new ht.CSGNode(); leftNode.setHost(shelf); leftNode.s3(23, 380, 100); leftNode.p3(-255, 200, 0); leftNode.setName('substract left'); leftNode.setParent(shelf); dm.add(leftNode); var rightNode = new ht.CSGNode(); rightNode.setHost(shelf); rightNode.s3(23, 380, 100); rightNode.p3(255, 200, 0); rightNode.setName('substract right'); rightNode.setParent(shelf); dm.add(rightNode); var bottomNode = new ht.CSGNode(); bottomNode.setHost(shelf); bottomNode.s3(480, 140, 140); bottomNode.p3(0, 80, 0); bottomNode.setName('substract bottom'); bottomNode.setParent(shelf); dm.add(bottomNode); var topNode = new ht.CSGNode(); topNode.setHost(shelf); topNode.s3(480, 10, 100); topNode.p3(0, 400, 0); topNode.setName('union top'); topNode.s('attach.operation', 'union'); topNode.setParent(shelf); dm.add(topNode); var book = new ht.Node(); book.setName('CSS3: The Missing Manual'); book.s3(60, 80, 8); book.p3(-100, 210, 20); book.r3(-Math.PI/6, Math.PI/5, 0); book.setIcon('book'); book.s({ 'front.image': 'book', 'back.color': 'white', 'left.color': 'white', 'all.color': 'gray' }); book.setHost(shelf); book.setParent(shelf); dm.add(book); } function initShelf2(){ var shelf = new ht.CSGNode(); shelf.s3(120, 240, 120); shelf.p3(0, 120, 0); shelf.setName('shelf2'); shelf.s({ 'all.color': '#805642', 'csg.color': 'yellow', 'csg.reverse.flip': true }); dm.add(shelf); var clipNode = new ht.CSGNode(); clipNode.setName('shelf2-substract-up'); clipNode.s3(100, 100, 130); clipNode.p3(0, 180, 0); clipNode.setHost(shelf); clipNode.s('attach.cull', true); clipNode.setParent(shelf); dm.add(clipNode); clipNode = new ht.CSGBox(); clipNode.setName('CSGBox-Expand-Left'); clipNode.s3(100, 100, 120); clipNode.p3(0, 65, 0.1); clipNode.setHost(shelf); clipNode.showMe = true; clipNode.s({ 'all.visible': false, 'front.visible': true, 'front.toggleable': true, 'front.reverse.flip': true, 'front.transparent': true, 'front.end': Math.PI * 0.7, 'front.color': 'rgba(0, 50, 50, 0.7)' }); clipNode.setParent(shelf); clipNode.setFaceExpanded('front', true, true); dm.add(clipNode); earth = new ht.Node(); earth.setName('earth'); earth.setIcon('earth'); earth.s3(70, 70, 70); earth.p3(0, 50, 0); earth.s({ 'shape3d': 'sphere', 'shape3d.image': 'earth' }); earth.setHost(shelf); earth.setParent(shelf); dm.add(earth); shelf.t3(-360, 0, 50); shelf.r3(0, Math.PI/7, 0); } function initShelf3(){ var shelf = new ht.CSGNode(); shelf.s3(120, 240, 120); shelf.p3(0, 120, 0); shelf.setName('shelf3'); shelf.setIcon('ben'); shelf.s({ 'all.image': 'brick', 'all.uv.scale': [2, 4], 'top.uv.scale': [2, 2], 'bottom.uv.scale': [2, 2], 'csg.image': 'ben', 'csg.blend': 'yellow' }); dm.add(shelf); photos = new ht.DoorWindow(); photos.setName('DoorWindow-Photos'); photos.setIcon('ben12'); photos.s3(110, 100, 130); photos.p3(5, 180, 0); photos.setHost(shelf); photos.showMe = true; photos.s({ 'bottom.uv': [1,1, 1,0, 0,0, 0,1], 'bottom.uv.scale': [1, 1], 'left.uv.scale': [3, 3], 'top.uv.scale': [2, 2], 'dw.s3': [0.8, 0.9, 0.05], 'dw.t3': [0, -5, 0], 'dw.axis': 'v', 'dw.toggleable': false, 'front.image': 'ben1', 'back.image': 'ben2', 'all.color': '#F8CE8B' }); photos.setParent(shelf); dm.add(photos); var clipNode = new ht.CSGBox(); clipNode.setName('CSGBox-Expand-Top'); clipNode.s3(100, 100, 120); clipNode.p3(0, 65, 0.1); clipNode.setHost(shelf); clipNode.showMe = true; clipNode.s({ 'all.visible': false, 'front.visible': true, 'front.color': 'red', 'front.transparent': true, 'front.opacity': 0.7, 'front.reverse.flip': true, 'front.toggleable': true, 'front.axis': 'top', 'front.end': Math.PI * 0.4 }); clipNode.setParent(shelf); clipNode.setFaceExpanded('front', true, true); dm.add(clipNode); shelf.t3(360, 0, 50); shelf.r3(0, -Math.PI/7, 0); }
相关推荐
基于扩展CSG结构的三维网格划分技术,周俊琨,金晓林,对基于面向对象表示的CSG三维建模方法进行了阐述。为了弥补传统CSG建模方法的缺陷,采用了一种CSG曲面的构造方法。再将CSG建模的数据
在Julia中构建 CSG 对象的算法和语法 ConstructiveGeometry.jl提供通过基本图元和 CSG 操作定义 2d 形状和 3d 实体的功能,以及用于显示这些对象并输出到 SVG 或 STL 文件的功能。 以下功能现在应该主要工作: 2d...
基于CSG550方案的国网表的计量代码,非常值得参考
Carve是一个C++库,用于执行两个任意多边形网格之间的布尔操作。 支持标准的联合和交叉操作,以及对称和非对称差异。... Carve csg还可以在面间任意插值,这意味着CSG操作不需要删除颜色,纹理坐标或其他数据。
Constructive Solid Geometry allows you to create new meshes by performing Subtraction, Union and Intersection between objects.
csg工具包一个用于Unity3D的CSG工具包,允许使用简单的图元构建复杂的网格。 csg-toolkit的目标主要是: 易于使用的CSG运算符和基本生成器集,允许通过数学方法构造网格。 一种可以开发复杂的CSG结构的语言。 该工具...
CSG允许您通过执行对象之间的减法、联合和交集来创建新的网格。您可以在Unity编辑器或运行时执行操作。得到的几何形状保留了原始网格的纹理UV坐标。该程序还按预期处理旋转和缩放的对象,适用于具有多个材料和子网格...
Q_CSG 110017.67.5-2012 南方电网一体化电网运行智能系统技术规范 第6-7.5部分:厂站应用 厂站装置功能及接口规范 合并单元
基于linux平台下的控制信令网关(csg),主要实现各模块http信令的交互,采用多线程编写
联合会 基于BSP的CSG(构造实体几何)的Java实现。 这是我所知道的唯一简单且免费的Java实现。 此实现使用基于的优化的CSG算法(请参阅CSG和Node类)。 感谢作者创建了库。 还有相关的库, 的和两个扩展库: 和 。 ...
Q_CSG 11109006-2013 计量自动化终端外形结构规范
南玻BSP 该项目的目标是为各种平台和渲染引擎实现构造实体几何(CSG)操作。... 目前,功能仅在Unity 3D游戏引擎的C#中实现,但是我计划在C ++中实现该库以用于常规OpenGL使用以及虚幻引擎的专用版本。
这是Asset Store下载的CSG 编辑器扩充/建模工具,里面含有实例和说明文档,亲测非常好用。
Constructive Solid Geometry,这是Asset Store下载的CSG 编辑器扩充/建模工具,里面含有实例和说明文档,亲测非常好用
Q CSG 11109002 2013 负荷管理终端技术规范 条文解释
Realtime CSG is a 'BSP' level design tool that allows you to Intuitively & rapidly create levels.
目的提出一种基于TIN和CSG的三维城市建模方法,解决我国现阶段“数字城市”的建设需求.方法采用基于半边数据结构的Delaunay三角剖分建模方法,对地形建模;采用 CSG建筑物建模方式对建筑物进行建模,并将建筑物模型...
这是Asset Store下载的CSG 编辑器扩充/建模工具,里面含有实例和说明文档,亲测非常好用,内含中文说明文档。
Q/CSG 110010-2012 南方电网载波通信技术规范