实战篇：（三）项目实战Vue 3 + WebGL 创建一个简单的 3D 渲染应用

Vue 3 + WebGL 创建一个简单的 3D 渲染应用

我们将使用 Vue 3 和 WebGL 创建一个简单的 3D 渲染应用。项目将展示如何在 Vue 组件中集成 WebGL，并渲染一个旋转的立方体。

在这里插入图片描述

1. 项目准备

首先，确保你已经安装了 Node.js 和 Vue CLI。如果还没有安装，可以通过以下命令安装：

npm install -g @vue/cli

然后，创建一个新的 Vue 3 项目：

vue create vue-webgl-demo
cd vue-webgl-demo

选择 Vue 3 配置并安装项目依赖。

2. 安装依赖

为了方便 WebGL 的开发，我们可以安装 gl-matrix 库来进行矩阵和向量的数学运算：

npm install gl-matrix

3. 创建 WebGL 组件

在 src/components 目录下创建一个名为 WebGLCanvas.vue 的组件。代码如下：

<template><canvas ref="canvas" class="webgl-canvas"></canvas>
</template><script>
// 导入 gl-matrix 库中的 mat4 模块，用于矩阵运算
import { mat4 } from 'gl-matrix';export default {name: 'WebGLCanvas',mounted() {// 组件挂载后，初始化 WebGLthis.initWebGL();},methods: {initWebGL() {// 获取 canvas 元素并初始化 WebGL 上下文const canvas = this.$refs.canvas;const gl = canvas.getContext('webgl');// 检查 WebGL 是否初始化成功if (!gl) {console.error('无法初始化 WebGL。');return;}// 设置 canvas 的宽高为窗口的宽高canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 设置视口，绘制区域与 canvas 相同gl.viewport(0, 0, canvas.width, canvas.height);// 设置背景色为黑色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清除颜色缓冲和深度缓冲gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// 立方体的顶点数据const vertices = new Float32Array([// 前面-0.5, -0.5,  0.5, // A0.5, -0.5,  0.5, // B0.5,  0.5,  0.5, // C-0.5,  0.5,  0.5, // D// 后面-0.5, -0.5, -0.5, // E0.5, -0.5, -0.5, // F0.5,  0.5, -0.5, // G-0.5,  0.5, -0.5, // H]);// 立方体的索引数据，用于绘制面const indices = new Uint16Array([0, 1, 2, 0, 2, 3, // 前面4, 5, 6, 4, 6, 7, // 后面0, 1, 5, 0, 5, 4, // 左面2, 3, 7, 2, 7, 6, // 右面0, 3, 7, 0, 7, 4, // 上面1, 2, 6, 1, 6, 5, // 下面]);// 创建并绑定顶点缓冲区const vertexBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将顶点数据写入缓冲区gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 创建并绑定索引缓冲区const indexBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);// 将索引数据写入缓冲区gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);// 定义顶点着色器const vertexShaderSource = `attribute vec4 a_Position; // 顶点位置属性uniform mat4 u_ModelViewMatrix; // 模型视图矩阵uniform mat4 u_ProjectionMatrix; // 投影矩阵void main() {// 将顶点位置转换到裁剪坐标系gl_Position = u_ProjectionMatrix * u_ModelViewMatrix * a_Position;}`;// 定义片段着色器const fragmentShaderSource = `precision mediump float; // 片段着色器精度void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段颜色为红色}`;// 创建并编译着色器const vertexShader = this.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);const fragmentShader = this.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);// 创建着色器程序并链接着色器const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program); // 使用该着色器程序// 绑定顶点缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 获取顶点属性位置const a_Position = gl.getAttribLocation(program, 'a_Position');// 指定如何从缓冲区获取顶点数据gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position); // 使能顶点属性// 设置投影矩阵和模型视图矩阵const projectionMatrix = mat4.create();const modelViewMatrix = mat4.create();// 定义透视投影mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100);// 将模型沿 Z 轴平移mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3]);// 获取 uniform 变量位置const u_ProjectionMatrix = gl.getUniformLocation(program, 'u_ProjectionMatrix');const u_ModelViewMatrix = gl.getUniformLocation(program, 'u_ModelViewMatrix');// 将矩阵传入着色器gl.uniformMatrix4fv(u_ProjectionMatrix, false, projectionMatrix);gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix);// 开始绘制this.draw(gl, program, indices.length);},createShader(gl, source, type) {// 创建着色器并编译const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);// 检查着色器编译是否成功if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {return shader;} else {console.error(gl.getShaderInfoLog(shader)); // 输出编译错误信息gl.deleteShader(shader); // 删除着色器}},draw(gl, program, numIndices) {let angle = 0; // 用于控制立方体旋转的角度const render = () => {// 清除颜色和深度缓冲gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);const modelViewMatrix = mat4.create();mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3]); // 将模型沿 Z 轴平移mat4.rotateY(modelViewMatrix, modelViewMatrix, angle); // 绕 Y 轴旋转// 将更新后的模型视图矩阵传入着色器const u_ModelViewMatrix = gl.getUniformLocation(program, 'u_ModelViewMatrix');gl.uniformMatrix4fv(u_ModelViewMatrix, false, modelViewMatrix);// 绘制立方体gl.drawElements(gl.TRIANGLES, numIndices, gl.UNSIGNED_SHORT, 0);angle += 0.01; // 增加角度，实现旋转requestAnimationFrame(render); // 请求下一帧};render(); // 启动渲染循环},},
};
</script><style scoped>
.webgl-canvas {width: 100%; /* canvas 占满父元素 */height: 100%; /* canvas 占满父元素 */
}
</style>

4. 使用组件

在 src/App.vue 中使用 WebGLCanvas 组件：

<template><div id="app"><WebGLCanvas /></div>
</template><script>
import WebGLCanvas from './components/WebGLCanvas.vue';export default {name: 'App',components: {WebGLCanvas,},
};
</script><style>
#app {margin: 0;padding: 0;overflow: hidden;
}
</style>

5. 运行项目

完成以上步骤后，可以通过以下命令运行项目：

npm run serve

打开浏览器并访问 http://localhost:8080，你将看到一个旋转的红色立方体。

在这里插入图片描述

6. 结论

通过以上步骤，我们成功创建了一个 Vue 3 + WebGL 的简单项目。你可以在此基础上扩展更多功能，比如添加纹理、交互效果或者实现复杂的 3D 场景。WebGL 的学习之路是不断探索和实践的过程，希望这篇博客能为你提供一个良好的开端！