基于HTML5 WebGL实现3D飞机叶轮旋转(1/4)

本篇文章主要介绍了"基于HTML5 WebGL实现3D飞机叶轮旋转"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。在3D拓扑上可以创建各种各样...

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。

在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？这时候就需要借助专业的3ds Max工具来建模了，然后通过3ds Max工具将模型导出成obj文件，然后再项目中引用导出的obj文件，这样就能成功的使用上复杂的图元了。

在《HT图形组件设计之道（四）》一文中有提及HT for Web引入obj文件的介绍，在这里我就不做重复介绍了，我们先来看看今天作为演示的Demo模型长什么样：

http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html

嘿嘿，是不是感觉今天的模型有些大材小用了，没办法，怪只怪自己不懂3ds Max工具，只能先用这个大家熟悉的模型来做Demo演示了。

首先我们需要有3ds Max工具将模型导出成obj及mtl文件，然后调用HT for Web的ht.Default.loadObj()方法读取并解析模型文件，在解析完成后，通过调用ht.Default.setShape3dModel()方法将模型注册到系统中，如此在后续的代码中就能够应用到该模型了，模型文件的读取及注册具体代码如下：

ht.Default.loadObj('plane.obj', 'plane.mtl', {                    
    center: true,
    r3: [0, -Math.PI/2, 0], // make plane face right
    s3: [0.15, 0.15, 0.15], // make plane smaller
    finishFunc: function(modelMap, array, rawS3){
        if(modelMap){  
            ht.Default.setShape3dModel('plane', array);

            var plane = new ht.Node();
            plane.s3(rawS3);
            plane.s({
                'shape3d': 'plane',
                'shape3d.scaleable': false,
                'wf.visible': true,
                'wf.color': 'white',
                'wf.short': true
            });
            dataModel.add(plane);
        }
    }
});

注册完3D模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下：

var dataModel = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.setEye(200, 50, 300);
g3d.setDashDisabled(false);
g3d.getView().style.background = '#4C7BBB';
g3d.addToDOM();

在3D拓扑上做了些简单的属性设置，让拓扑看起来舒服些，如此我们就可以看到我们创建出来的飞机模型到底长什么样了

怎么样，创建一个复杂模型好像并没有想象中的复杂（复杂的东西都让美工做完了）。

我们仔细观察飞机会发现，飞机前面的螺旋桨颜色和机身一样，一眼看去不太容易注意到它的存在，那能否将其颜色改掉呢？我们可以查看下mtl文件，看飞机的螺旋桨是否分离机身独立成一个材质，mtl文件的内容如下：

newmtl body
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.3608 0.4353 0.2549
    Kd 0.3608 0.4353 0.2549
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000

newmtl propeller
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.3608 0.4353 0.2549
    Kd 0.3608 0.4353 0.2549
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000