OpenGL旋转启停按钮问题：旋转正方形动画无法通过按钮启停

嘿，我来帮你搞定这个旋转停不下来的问题！咱们一步步排查最容易踩的坑：

1. 确保loop变量的作用域能被正确访问 #

很多时候按钮点击没效果，都是因为点击事件修改的loop和render函数用到的不是同一个变量！比如如果loop是某个局部函数里声明的，点击事件根本碰不到它。

你得把loop放在全局作用域，或者放在能让点击事件和render都访问到的闭包里：

// 全局声明，让两个函数都能拿到
let loop = 1;
let rotationAngle = 0; // 用来存储旋转角度

2. 给按钮绑定正确的状态切换逻辑 #

先给按钮加个ID方便获取，然后在点击事件里切换loop的状态，还可以加个日志调试看看是否生效：

<!-- 给按钮添加ID -->
<button id="toggleRotation">停止旋转</button>

document.getElementById('toggleRotation').addEventListener('click', () => {
  // 切换0和1的状态
  loop = loop === 1 ? 0 : 1;
  // 顺便更新按钮文本，提升用户体验
  const btn = document.getElementById('toggleRotation');
  btn.textContent = loop === 1 ? '停止旋转' : '开始旋转';
  console.log('当前loop状态:', loop); // 调试用，确认点击后值是否变化
});

3. 在render里只在loop=1时更新旋转角度 #

这是核心！如果不管loop状态都在更新角度，那肯定停不下来。你得把角度更新逻辑放在loop的判断里：

function render() {
  // 只有loop=1时，才让旋转角度增加
  if (loop === 1) {
    rotationAngle += 0.01; // 旋转步长，可根据需求调整
  }

  // 把旋转角度转换成矩阵，传给着色器
  const rotMatrix = mat4.create();
  mat4.rotate(rotMatrix, rotMatrix, rotationAngle, [0, 0, 1]); // 绕Z轴旋转
  // 将旋转矩阵传递给顶点着色器的uniform变量...

  // 绘制正方形的常规操作（清画布、绑定缓冲区、执行绘制）...

  // 持续请求下一帧，确保状态变化能及时响应
  requestAnimationFrame(render);
}

// 页面加载完成后启动渲染
window.onload = () => {
  render();
};

4. 检查着色器是否正确使用旋转矩阵 #

如果上面都做了还是停不下来，可能是着色器里没正确应用旋转矩阵。比如顶点着色器需要把顶点位置和旋转矩阵相乘：

// 顶点着色器示例
attribute vec2 a_position;
uniform mat4 u_rotationMatrix;

void main() {
  gl_Position = u_rotationMatrix * vec4(a_position, 0.0, 1.0);
}

按这几步调整后，点击按钮应该就能正常启停旋转啦！如果还有问题，可以打开控制台看看有没有报错，或者确认render函数里读取的loop值是不是已经被修改。

内容的提问来源于stack exchange，提问作者user9516512