WebGL（2）:绘制立方体

最新推荐文章于 2025-04-28 04:53:04 发布

原创

最新推荐文章于 2025-04-28 04:53:04 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何使用WebGL绘制3D立方体，包括基本思路、代码实现及旋转变换矩阵的解析，涉及角度转换、余弦和正弦函数的应用。

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<canvas id="webgl" width="500" height="500" style="background-color: #0d72da"></canvas>
</body>
<script id="vertexShader">
    attribute vec4 apos;
    void main(){
    //设置选装角度
	float radian=radians(30.0);
	//计算余弦正弦
	float cos=cos(radian);
	float sin=sin(radian);
	//设置旋转矩阵
	mat4 mx=mat4(1,0,0,0,  0,cos,-sin,0,  0,sin,cos,0,  0,0,0,1);
	mat4 my=mat4(cos,0,-sin,0,  0,1,0,0,  sin,0,cos,0,  0,0,0,1);
	gl_Position=mx*my*apos;
    }
</script>

<script id="fragmentShader">
		void main(){
			gl_FragColor=vec4(1.0,0.0,0.0,1.0);
		}
</script>

<script>
    var canvasElement