37 WebGL多个模型组成一个复杂的模型

前端

案例查看地址：点击这里




    
    
    
    Title

相对于上一节的代码，着色器部分一点都没有修改。

在keydown()事件中，增加了新增部件的旋转角度变量，并相应的增加了鼠标控制的事件。

在draw()函数内，将额外增加的结构也相应的绘制出来。模型的各个部件base、arm1、arm2、palm、finger1和finger2等虽然都是立方体，但是长宽各不相同，所以本例相应的扩展了drawBox()函数，添加了三个参数width(宽度)、height(高度)和depth(深度)。

为什么会需要添加pushMatrix()和popMatrix()两个存储矩阵的压栈和出栈？

因为如果按以前的那样顺序绘制的话，finger2关联的地方将不是手掌palm，而是finger1，所以，在绘制finger1之前，将矩阵存储起来，然后在绘制完finger1之后，再绘制finger2，这样两个手指都关联到了手掌palm上了。只要栈足够深，用这种方法就可以绘制任意复杂的层次结构模型。我们只需要按照层次结构，从高到底绘制部件，并在绘制“具有兄弟部件”的部件前将模型矩阵压入栈，绘制完再弹出即可。

为什么drawBox()函数内部也需要压栈入栈？

drawBox()函数首先将模型矩阵乘以由width、height和depth参数组成的缩放矩阵，是绘制出的立方体尺寸与设想的一样。如果不是用压栈出栈，绘制第一个的缩放矩阵，会对第二个绘制的缩放矩阵产生一定的影响，所以，要将缩放之前的默认大小保存下来，就用到了。