基于HT的CSG功能构建HTML5的3D书架

构造实体几何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);
                  
}   

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于HT的CSG功能构建HTML5的3D书架

892
来自专栏Fish

poj-3253 优先队列

大神指导说要弄个博客,写写题解。那我就听大神的话,写写题解吧。 这道题的题意就是FJ这个人有一块木板,长度是N(1 ≤ N ≤ 20,000),然后要切成好多块...

1867
来自专栏非典型技术宅

iOS实践:一步步实现星级评分1. 创建星星2. 优化3. 灵异事件

1214
来自专栏灯塔大数据

每周学点大数据 | No.74 Spark 的核心操作——Transformation 和 Action

编者按:灯塔大数据将每周持续推出《从零开始学大数据算法》的连载,本书为哈尔滨工业大学著名教授王宏志老师的扛鼎力作,以对话的形式深入浅出的从何为大数据说到大数据算...

35611
来自专栏C语言及其他语言

[每日一题]报数

结合前几天的题目,今天推出的依旧是个数组的问题,今天的是高级点的一题 题目描述 有n人围成一圈,顺序排号。从第1个人开始报数(从1到3报数),凡报到3的人退出...

2595
来自专栏Jack的Android之旅

模仿QQ运动item的界面

是不是很像呢,那具体是实现是怎样的呢,即使概括的来说就是 1.计算各个变量的值(记得是会随整个View的大小变化而变化)。 2其次利用好canvas.tra...

653
来自专栏开发 & 算法杂谈

凸包问题之GrahamScan解法

当沿着Convex hull逆时针漫游时,总是向左转在极坐标系下按照极角大小排列,然后逆时针方向漫游点集,去除非Convex hull顶点(非左 转点)。

724
来自专栏黒之染开发日记

js模块化例子

最近在看一本书,里面提到js的模块化,觉得很有必要,所以记录下来 Game.js

812
来自专栏菩提树下的杨过

Flash/Flex学习笔记(22):滤镜学习

Silverlight中称之为“效果(Effect)”的东东,在Flash里叫“滤镜(Filter)",而且Flash里内置的滤镜要比Silverlight丰富...

1819
来自专栏机器人网

中英文对照,瞬间理解西门子PLC指令

指令( 英文全称意思 ) :指令含义 1、LD ( Load 装载 ) :动合触点 2、LDN ( Load Not 不装载 ) : 动断触点 3、A ( A...

3317

扫码关注云+社区