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

原创

已于 2024-10-16 17:25:40 修改

· 1.3k 阅读

4 ·

版权

文章标签：

#vue.js #webgl #3d

于 2024-10-11 13:39:05 首次发布

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