Three.js基于键盘事件与标志位切换相机位置的问题排查

你现在这套代码完全实现不了预期的单次按键切状态效果，不止是同帧触发多分支的问题，从变量作用域到监听逻辑全是错的：

• 第一，cam_actio是flag_ini()里用var声明的局部变量，作用域只局限在flag_ini函数内部，process_keyboard里根本访问不到这个变量，运行直接报未定义错误。而且你每帧渲染都调用一次flag_ini()，就算把变量提到全局，每帧都会把cam_actio重置成6，标志位根本存不住上一次的状态。
• 第二，键盘监听逻辑写反了。你在keyup（按键抬起）事件里把按键状态设为true，keydown（按键按下）时设为false，等于你按着Q键的时候keyboard['q']永远是false，松开键的瞬间才会变成true，和你想要的触发逻辑完全颠倒。
• 第三，就算你把前两个问题都修了，现在所有Q键相关的判断都是平行的if，不是互斥的else if，只要Q键处于按下状态，每帧进process_keyboard的时候，第一个if改完cam_actio的值，会立刻命中下一个符合条件的if分支，一帧内直接把所有状态轮完。另外你写的cam_actio += cam_actio是把值翻倍，初始值6加完直接变12，永远走不到你写的1、2、3这些判断分支，逻辑本身就不对。
• 第四，你把init_Camera()、init_Spot()也放在每帧执行的渲染循环里，就算前面的逻辑都对，你刚改完相机位置、灯光参数，下一行就被初始化函数重置回默认值，根本看不到切换效果。

正确实现方式 #

要实现按一次Q切一次相机状态，不要把切换逻辑放在每帧轮询里，直接在keydown事件里做边缘检测（只在按键从抬起变按下的瞬间触发一次，长按不重复触发），状态切换用取模实现循环，比一堆平行if好维护：

// 全局声明状态变量，不要放在函数里做局部变量
let cam_actio = 6; // 初始相机状态
const keyboard = {}; // 用对象存按键状态，不要用空数组

// 初始化逻辑只跑一次，不要放进渲染循环
init_Camera();
init_Spot();

// 修正键盘监听：按下瞬间触发单次逻辑，抬起重置状态
addEventListener('keydown', (e) => {
  // 边缘检测：只有之前是抬起状态，本次按下才触发，避免长按重复执行
  if (!keyboard[e.key]) {
    keyboard[e.key] = true;
    // Q键切相机的逻辑只在按下瞬间执行一次
    if (e.key.toLowerCase() === 'q') {
      // 状态循环 0→1→2→3→4→5→6→0
      cam_actio = (cam_actio + 1) % 7;
      // 统一匹配状态设置相机参数
      switch (cam_actio) {
        case 0:
          cam.position.set(0, 3, 9);
          cam.lookAt(0, 0, 0);
          break;
        case 1:
          cam.position.set(0, 3, -9);
          cam.lookAt(0, 0, 0);
          break;
        case 2:
          cam.position.set(9, 3, 0);
          cam.lookAt(0, 0, 0);
          break;
        case 3:
          cam.position.set(-9, 3, 0);
          cam.lookAt(0, 0, 0);
          break;
        case 4:
          cam.position.set(0, 0, 5);
          cam.lookAt(0, 3, 0);
          break;
        case 5:
          cam.position.set(0, 5, 0);
          cam.lookAt(0, 0, 0);
          break;
        case 6:
          cam.position.set(0, 0, 5);
          cam.lookAt(0, 0, 5);
          break;
      }
    }
  }
});
addEventListener('keyup', (e) => {
  keyboard[e.key] = false;
});

// 渲染循环删掉每帧重置的初始化调用
function drawScene(){
  process_keyboard(); // 这里只保留需要长按持续生效的按键逻辑，比如a/s/d/f/g/h的灯光、视角临时调整
  renderer_a.render(cena,cam);
  requestAnimationFrame(drawScene);
}
drawScene();

剩下a/s/d/f/g/h这些需要长按持续生效的功能，继续放在process_keyboard里每帧判断就行，这些不需要做单次触发，按键按住的时候保持对应状态就可以。

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