返回

在 OpenGL 中绘制通过键位移动的正方形的简单指南

IOS

使用 OpenGL 绘制可以通过键盘移动的正方形

作为一名图形学初学者，掌握如何使用 OpenGL 绘制可以通过键盘移动的正方形是一项必备技能。在本指南中，我们将逐步引导你完成这个过程，只需修改两个关键方法即可。

理解基础知识

要绘制正方形，我们需要定义两个关键参数：

  • 顶点数组： 定义正方形的顶点位置。
  • 颜色数组： 指定正方形的填充颜色。

修改 draw() 方法

在 draw() 方法中，我们需要更新正方形的位置。为了响应键盘输入，我们将使用 GLFW 库来检测键盘状态。

void draw() {
  // 检测键盘输入
  if (GLFW_PRESS == glfwGetKey(window, GLFW_KEY_UP)) {
    // 向上移动正方形
    y_position += 0.01f;
  } else if (GLFW_PRESS == glfwGetKey(window, GLFW_KEY_DOWN)) {
    // 向下移动正方形
    y_position -= 0.01f;
  }

  // 清除之前的绘图
  glClear(GL_COLOR_BUFFER_BIT);

  // 设置模型-观察矩阵
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
  glTranslatef(0.0f, y_position, 0.0f);

  // 绘制正方形
  glBegin(GL_QUADS);
    glVertex3f(-0.5f, -0.5f, 0.0f);
    glVertex3f( 0.5f, -0.5f, 0.0f);
    glVertex3f( 0.5f,  0.5f, 0.0f);
    glVertex3f(-0.5f,  0.5f, 0.0f);
  glEnd();
}

在修改后的 draw() 方法中，我们增加了键盘输入检测逻辑。当按下向上键时，正方形会向上移动；按下向下键时，正方形会向下移动。

修改 keyboard() 方法

在 keyboard() 方法中，我们需要处理键盘输入事件。如果检测到键盘按下，我们将更新正方形的 y 轴位置。

void keyboard(GLFWwindow* window, int key, int scancode, int action, int mods) {
  // 检查键盘按下事件
  if (GLFW_PRESS == action) {
    switch (key) {
      case GLFW_KEY_UP:
        // 向上移动正方形
        y_position += 0.01f;
        break;
      case GLFW_KEY_DOWN:
        // 向下移动正方形
        y_position -= 0.01f;
        break;
    }
  }
}

在修改后的 keyboard() 方法中，我们添加了键盘输入事件处理逻辑。当按下向上键或向下键时，我们会更新正方形的 y 轴位置。

代码示例

完整的代码示例如下：

#include <GLFW/glfw3.h>
#include <GL/gl.h>

const int WIDTH = 640;
const int HEIGHT = 480;

float y_position = 0.0f;

void draw() {
  // 检测键盘输入
  if (GLFW_PRESS == glfwGetKey(window, GLFW_KEY_UP)) {
    // 向上移动正方形
    y_position += 0.01f;
  } else if (GLFW_PRESS == glfwGetKey(window, GLFW_KEY_DOWN)) {
    // 向下移动正方形
    y_position -= 0.01f;
  }

  // 清除之前的绘图
  glClear(GL_COLOR_BUFFER_BIT);

  // 设置模型-观察矩阵
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
  glTranslatef(0.0f, y_position, 0.0f);

  // 绘制正方形
  glBegin(GL_QUADS);
    glVertex3f(-0.5f, -0.5f, 0.0f);
    glVertex3f( 0.5f, -0.5f, 0.0f);
    glVertex3f( 0.5f,  0.5f, 0.0f);
    glVertex3f(-0.5f,  0.5f, 0.0f);
  glEnd();
}

void keyboard(GLFWwindow* window, int key, int scancode, int action, int mods) {
  // 检查键盘按下事件
  if (GLFW_PRESS == action) {
    switch (key) {
      case GLFW_KEY_UP:
        // 向上移动正方形
        y_position += 0.01f;
        break;
      case GLFW_KEY_DOWN:
        // 向下移动正方形
        y_position -= 0.01f;
        break;
    }
  }
}

int main() {
  // 初始化 GLFW
  glfwInit();

  // 创建 GLFW 窗口
  GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "移动正方形", NULL, NULL);
  if (window == NULL) {
    glfwTerminate();
    return -1;
  }

  // 激活上下文
  glfwMakeContextCurrent(window);

  // 初始化 GLEW
  glewInit();

  // 设置视口
  glViewport(0, 0, WIDTH, HEIGHT);

  // 设置背景颜色
  glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

  // 主循环
  while (!glfwWindowShouldClose(window)) {
    // 检测事件
    glfwPollEvents();

    // 清除颜色缓冲区
    glClear(GL_COLOR_BUFFER_BIT);

    // 绘制正方形
    draw();

    // 交换缓冲区
    glfwSwapBuffers(window);
  }

  // 销毁 GLFW 窗口
  glfwDestroyWindow(window);

  // 终止 GLFW
  glfwTerminate();

  return 0;
}

结论

通过修改 draw() 和 keyboard() 方法，我们成功地创建了一个可以通过键盘控制在垂直方向上移动的正方形。这一技能为进一步的图形学探索奠定了基础，例如创建更复杂的对象、添加动画效果或实现交互式体验。

常见问题解答

  1. 为什么我的正方形不会移动？

    • 确保你已经正确修改了 draw() 和 keyboard() 方法。另外，检查你的键盘输入代码是否正确。

  2. 如何让我的正方形移动得更快？

    • 在 draw() 方法中增加移动速度，例如将 y_position += 0.01f 替换为 y_position += 0.05f。

  3. 如何限制正方形在窗口内的移动？

    • 在 draw() 方法中添加条件语句来检查正方形的位置，并在达到边界时停止移动。

  4. 如何添加水平移动？

    • 修改 keyboard() 方法以检测左右箭头键，并更新正方形的 x 轴位置。

  5. 如何改变正方形的颜色？

    • 修改顶点颜色数组以指定不同的颜色。