MyException - 我的异常网
当前位置:我的异常网» HTML5 » 基于HTML5 Canvas WebGL打造分离摩托车

基于HTML5 Canvas WebGL打造分离摩托车

www.MyException.Cn  网友分享于:2013-11-16  浏览:0次
基于HTML5 Canvas WebGL制作分离摩托车

工业方面制作图表,制作模型方面运用到 3d 模型是非常多的,在一个大的环境中,构建无数个相同的或者不同的模型,构建起来对于程序员来说也是一件相当头疼的事情,我们利用 HT 帮大家解决了很大的难题,无数个例子可在官网上查找到 http://hightopo.com/demos/index.html。

本文 Demo 地址: http://hightopo.com/guide/guide/plugin/obj/examples/example_objajax.html

这次我们的例子是将这些实例中的一小部分思想抽取出来,作为给大家的分析,看看这次实现的例子效果图:

这个例子用了 HT 中的树组件 ht.widget.TreeView 和 HT 中加载 OBJ 格式文件的 ht.Default.loadObj 函数来加载图中的两辆摩托车,我们利用代码来从头开始解析这个例子的部分。

首先观察这个例子的界面展示,会发现这个界面是由左右两部分组成的,右边又是由上下两部分组成的,这种分割模式在 HT 中有很好的解决办法,可以完全利用 ht.widget.SplitView 将界面分层,也可以利用 ht.widget.BorderPane 将界面分成上面、中间和下面。这里我们因为是示例,所以将两种方法都用上了:

dataModel = new ht.DataModel();//数据模型                
g3d = new ht.graph3d.Graph3dView(dataModel);//3d组件
toolbar = new ht.widget.Toolbar(item); //工具条
borderPane = new ht.widget.BorderPane();//面板组件
borderPane.setTopView(toolbar);//toolbar 放在上部
borderPane.setCenterView(g3d);//g3d 放在中间部分
treeView = new ht.widget.TreeView(dataModel); //树组件
mainSplit = new ht.widget.SplitView(treeView, borderPane, 'h', 0.2); //分割组件

 

其中 toolbar 中的 item 也是遵守 HT 设置规则的,item 是一个数组,数组中每一个元素都是toolbar上的一部分,这个例子中toolbar只有2个元素,也具有足够的代表性:

item = [
    {
        label: 'Editable',
        type: 'check',
        action: function(){
            g3d.setEditable(this.selected);
        }
    },
    {
        id: 'size',
        label: 'Size',
        slider: {
            width: 120,
            min: 1,
            max: 60,
            value: 1,
            thickness: 1,
            onValueChanged: function(){
            if(rawS3){
                var value = this.getValue();
                dataModel.each(function(data){
                if(data instanceof ht.Node){
                    data.s3(rawS3[0] * value, rawS3[1] * value, rawS3[2] * value); 
                    data.s({
                        'note.scale': value/20,
                        'note.t3': [0, -value, value]
                    });                                           
                }                                        
            });                                    
        }
    }
];

 

我们可以通过设置 toolbar 中的 item 元素来设置对象格式类型,其中 type 可以设置为 check、toggle 和 radio,分别表示复选框、开关按钮和单选按钮,这里我们将是否可编辑 Editable 设置为复选框,可以通过控制这个元素来设置是否可编辑,后面的拉条也是 HT 中封装的 ht.Slider 滑动条来绑定 OBJ 对象的 size 大小,通过控制滑动条来控制 OBJ 的大小,详情请参考 HT for Web 工具条组件手册。

接着要将最外层的组件添加进底层 div 中,没有阅读过我的文章的同学这边我解释一下,所有的 HT 组件最根层都是一个 div 组件,可通过组件的 getView 函数获得,默认和自定义交互时间监听一般添加在该 div 上(getView().addEventListener(type, func, false)),渲染层一般由 canvas 提供,用户可直接对根 div 和 canvas 层设置 css 样式,也可以添加新的 HTML 组件到根 div 上,作为 canvas 的兄弟组件一起呈现。详情请参考 HT for Web 入门手册。

接着通过利用 ht.widget.loadObj 函数将 OBJ 格式文件导入模型:

ht.Default.loadObj('obj/scooter.obj', 'obj/scooter.mtl', {//左边不可分割的摩托 
    cube: true,
    center: true,
    shape3d: 'scooter',
    finishFunc: function(modelMap, array, rawS3){
        window.rawS3 = rawS3;
        if(modelMap){
            var node = new ht.Node();
            node.setName('All in ONE');
            node.s({
                 'shape3d': 'scooter',
                 'wf.visible': 'selected',
                 'note': 'One Node',
                 'note.face': 'center',
                 'note.position': 7,
                 'note.background': 'blue',
                 'note.autorotate': 'y' 
            });
            node.s3(rawS3);
            node.p3(-300, 0, 0);
            dataModel.add(node);
        }
        checkLoaded();
    }
});

 

ht.Default.loadObj 函数有三个参数,objUrl OBJ 文件路径,mtlUrl MTL 文件路径,params JSON 结构参数,parmas 参数可以设置 ht.Default.parseObj(text, mtlMap, params) 第三个参数的控制信息,也就是说 ht.Default.parseObj 函数中的第三个参数所带的控制信息在 ht.Default.loadObj 函数中的第三个参数 params 中都可以使用,并且添加了 sync 和 finishFunc 参数,finishFUnc 参数是用于加载后的回调处理的函数,带有参数 modelMap、array 和 rawS3 ,可以在 finishFunc 中做任何事情!详情请参考 HT for Web OBJ 手册。

本例中有两个 motor 摩托车模型,一个是整体的模型,不能拆分,一个是可以拆分成部分的模型,接下来就来看看如何将 OBJ 文件中的模型拆分开来:

ht.Default.loadObj('obj/scooter.obj', 'obj/scooter.mtl', {//右边可分割的摩托             

    cube: true,
    center: true,
    finishFunc: function(modelMap, array, rawS3){
        if(modelMap){
            var lastNode = null,
            firstNode = null,
            parentNode = new ht.Data();    
                            
            parentNode.setName('Separate Scooter');
            dataModel.add(parentNode);                                                

            for(var name in modelMap){             
                var model = modelMap[name];   
                var shape3d = 'scooter:' + name;
                ht.Default.setShape3dModel(shape3d, model);                

                var node = new ht.Node();
                node.setName(name);
                node.setParent(parentNode);
                node.s({
                    'shape3d': shape3d,
                    'wf.visible': 'selected'
                });
                node.setHost(lastNode);
                lastNode = node;
                if(!firstNode){
                    firstNode = node;
                }
                node.s3(rawS3); 
                dataModel.add(node);
            }
            if(lastNode){
                firstNode.setHost(lastNode);
                firstNode.p3(300, 0, 0);
                firstNode.s({
                    'note': 'A lot of Nodes host together',
                    'note.face': 'center',
                    'note.position': 7,
                    'note.background': 'blue'
                });                                
            }                             
        } 
        checkLoaded();
    }
});  

 

我们可以通过 modelMap 获得通过 ht.Default.parseObj 函数解析后的返回值,这个值通常就是 obj 格式的文件解析后返回的 map 结构的 json 对象,每一个材质都对应一个模型信息,详情请参考 HT for Web OBJ 手册。

 我们利用 ht.Default.parseObj 函数解析获得每个材质的模型信息,通过遍历整个模型,获得单独的模型信息,并且将其命名,这样我们就能显示每个模型的名称了,也能对每个部分的模型进行控制。

上面代码中 45 行出现的 checkLoaded 函数是方便控制树组件的展开合并的函数,我们在工业等各个领域中,用到“树”的概念是非常多的,所以这个例子也运用到用作解释:

function checkLoaded(){
    loadTask--;
    if(loadTask === 0){
        treeView.expandAll();
        treeView.selectAll();

        ht.Default.startAnim({
            action: function(t){
                toolbar.v('size', 50*t);
            }
        });                     
    }
}

 

因为“树”的部分我们只用了两个主节点,All in one 和 Seperate Scooter,我们定义 loadTask 变量值为 2,上面代码的意思是如果两个模型都加载完毕,那么就将树组件 treeView 展开,并且全部选中,再用代码控制 toolbar 中的值为 50*t 来调整模型的大小。

对于树组件 treeView,HT 封装了很多帮助组件,使得开发速度更快,比如在这个例子中用到的 setSortFunc 函数,是用来设置排序的;setCheckMode 函数是用来设置 check 模式的,大家一看到 check 就会想到多选框,在这里 HT 确实是通过设置 setCheckMode 函数来设置多选框,这个函数的参数可为:

  • null:默认值,不启用check选择模式
  • default:check模式的默认选择方式,即单击选中或取消选中,只影响当前点击中的data对象
  • children:该check模式将同时影响点击中的data对象,以及其孩子对象
  • descendant:该check模式将同时影响点击中的data对象,以及其所有子孙对象
  • all:该check模式将同时影响点击中的data对象,以及其所有父辈和子孙对象

如果还是没有理解,大家可以试试将这个函数注释掉,你就能很清楚地明白它是做什么用的了。或者查看 HT for Web 树组件手册。

以上就是今天的例子,实际开发中的例子会更复杂,逻辑也会更多,但通过 HT 来做,什么事情都变得 so easy!

 

文章评论

我是如何打败拖延症的
我是如何打败拖延症的
老程序员的下场
老程序员的下场
Java程序员必看电影
Java程序员必看电影
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
一个程序员的时间管理
一个程序员的时间管理
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
漫画:程序员的工作
漫画:程序员的工作
总结2014中国互联网十大段子
总结2014中国互联网十大段子
每天工作4小时的程序员
每天工作4小时的程序员
旅行,写作,编程
旅行,写作,编程
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
为什么程序员都是夜猫子
为什么程序员都是夜猫子
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员应该关注的一些事儿
程序员应该关注的一些事儿
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
10个调试和排错的小建议
10个调试和排错的小建议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
代码女神横空出世
代码女神横空出世
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
那些争议最大的编程观点
那些争议最大的编程观点
程序员和编码员之间的区别
程序员和编码员之间的区别
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员的鄙视链
程序员的鄙视链
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
鲜为人知的编程真相
鲜为人知的编程真相
程序员都该阅读的书
程序员都该阅读的书
程序员必看的十大电影
程序员必看的十大电影
 程序员的样子
程序员的样子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
如何成为一名黑客
如何成为一名黑客
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我的丈夫是个程序员
我的丈夫是个程序员
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
编程语言是女人
编程语言是女人
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有