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

麻花痒 · 2024-10-15 09:28:24

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() {
// 组件挂载后，初始化 WebGL
this.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, // A
0.5, -0.5, 0.5, // B
0.5, 0.5, 0.5, // C
-0.5, 0.5, 0.5, // D
// 后面
-0.5, -0.5, -0.5, // E
0.5, -0.5, -0.5, // F
0.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 的学习之路是不断探索和实践的过程，希望这篇博客能为你提供一个良好的开端！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云