WebGL(2):绘制立方体

实现的基本思路很简单,首先提供如上图所示立方体线框所有顶点的三维坐标,然后通过旋转矩阵对所有顶点进行旋转变换,最后调用绘制函数gl.drawArrays把所有点连成线渲染出来。

WebGL(2):绘制立方体_第1张图片

完整代码:




    











执行结果:

WebGL(2):绘制立方体_第2张图片

代码解释:

  • radians()函数:角度值转化为弧度制,参数是浮点数float,比如45时,要写成45.0
  • cos是余弦函数,参数要求是弧度值且是浮点数
  • sin是正弦函数,参数要求是弧度值且是浮点数

旋转变换矩阵解析:

假设一个点的坐标是(x,y,z),经过旋转变换后的坐标为(x,,y,,z,)

绕Z轴旋转γ角度

z的坐标不变不变,x、y的坐标发生变化,在笛卡尔坐标系下通过简单的数学计算就可以知道结果。

WebGL(2):绘制立方体_第3张图片 =WebGL(2):绘制立方体_第4张图片

绕X轴旋转α角度

x的坐标不变不变,y、z的坐标发生变化,

WebGL(2):绘制立方体_第5张图片=

绕Y轴旋转β角度

y的坐标不变不变,z、x的坐标发生变化

=

 

你可能感兴趣的:(WebGL)