返回

掌握鼠标事件，玩转WebGL旋转立方体

前端

在现代网页开发中，WebGL 作为一种强大的图形库，因其出色的 3D 渲染能力而备受推崇。它允许开发者在浏览器中创建复杂的交互式三维图形。本文将带您领略 WebGL 的魅力，学习如何通过鼠标事件来控制立方体的旋转，让您轻松构建出炫酷的三维动画。

一、WebGL 简介

WebGL的全称是Web Graphics Library，是专为渲染2D和3D图形而设计的JavaScript API，为HTML5标准的一部分。它提供了使用硬件加速的图形渲染，允许开发者使用OpenGL ES 2.0进行3D图形编程。

二、创建 WebGL 画布

首先，我们需要创建一个 WebGL 画布作为我们绘图的区域。我们可以使用 HTML5 的<canvas>标签来创建画布。

<canvas id="webgl-canvas"></canvas>

三、初始化 WebGL 上下文

接下来，我们需要初始化 WebGL 上下文。WebGL 上下文是与显卡进行通信的桥梁，允许我们控制 WebGL 的功能和状态。

const canvas = document.getElementById('webgl-canvas');
const gl = canvas.getContext('webgl');

四、创建顶点着色器和片元着色器

顶点着色器和片元着色器是 WebGL 中用来处理顶点数据和像素数据的程序。我们可以使用 WebGL 的 createShader() 方法来创建着色器，然后使用 shaderSource() 方法来设置着色器的源代码。

顶点着色器：

attribute vec3 a_position;
attribute vec3 a_color;
varying vec3 v_color;

uniform mat4 u_modelViewMatrix;
uniform mat4 u_projectionMatrix;

void main() {
  gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(a_position, 1.0);
  v_color = a_color;
}

片元着色器：

precision mediump float;

varying vec3 v_color;

void main() {
  gl_FragColor = vec4(v_color, 1.0);
}

五、创建缓冲区对象

缓冲区对象是 WebGL 中用来存储顶点数据和索引数据的对象。我们可以使用 WebGL 的 createBuffer() 方法来创建缓冲区对象，然后使用 bindBuffer() 方法来绑定缓冲区对象。

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

六、编译着色器程序

着色器程序是将顶点着色器和片元着色器连接在一起的程序。我们可以使用 WebGL 的 createProgram() 方法来创建着色器程序，然后使用 attachShader() 方法将顶点着色器和片元着色器附加到着色器程序中。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

七、设置 WebGL 状态

在绘制图形之前，我们需要设置 WebGL 的一些状态，比如启用顶点属性数组、指定使用的着色器程序等。

gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(colorAttributeLocation);
gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.useProgram(program);

八、绘制图形

最后，我们可以使用 WebGL 的 drawElements() 方法来绘制图形。

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

九、鼠标事件控制旋转

接下来，我们需要通过鼠标事件来控制立方体的旋转。我们可以使用 addEventListener() 方法来监听鼠标事件。

canvas.addEventListener('mousemove', (event) => {
  const dx = event.movementX;
  const dy = event.movementY;

  xAngle += dx * 0.01;
  yAngle += dy * 0.01;
});

十、键盘事件控制运动方向

最后，我们需要通过键盘事件来控制立方体的运动方向。我们可以使用 addEventListener() 方法来监听键盘事件。

document.addEventListener('keydown', (event) => {
  switch (event.keyCode) {
    case 37: // left arrow
      xSpeed = -0.1;
      break;
    case 38: // up arrow
      ySpeed = 0.1;
      break;
    case 39: // right arrow
      xSpeed = 0.1;
      break;
    case 40: // down arrow
      ySpeed = -0.1;
      break;
  }
});