实现与bruno-simon.com一致的Three.js鼠标相机移动（代码故障）

你的代码存在几个核心问题，导致无法实现目标效果，下面是问题分析和修正方案：

问题点分析 #

• 相机移动逻辑错误：你把相机位置更新的代码放在了mouseup事件里，这只会在鼠标松开时执行一次，而不是拖动过程中持续响应
• mouseup事件未传入event参数：直接使用event.clientX会导致变量未定义报错
• 缺少mousemove事件监听：拖动相机需要在鼠标按下并移动时持续计算位移
• 未添加鼠标按下状态标记：没有判断鼠标是否处于按住状态，会导致未按下鼠标时也触发移动
• 未初始化previousMousePosition变量：如果没提前定义，首次赋值会报错

修正后的完整代码 #

// 初始化变量
let isMouseDown = false;
const previousMousePosition = {
  x: 0,
  y: 0
};

// 鼠标按下事件
document.addEventListener("mousedown", function(event) {
  isMouseDown = true;
  previousMousePosition.x = event.clientX;
  previousMousePosition.y = event.clientY;
  // 替换jQuery为原生JS，避免依赖
  document.body.classList.remove("grab");
  document.body.classList.add("grabbing");
});

// 鼠标移动事件：核心的相机更新逻辑放在这里
document.addEventListener("mousemove", function(event) {
  if (!isMouseDown) return; // 鼠标未按下时不执行

  const deltaMove = {
    x: event.clientX - previousMousePosition.x,
    y: event.clientY - previousMousePosition.y
  };

  // 更新相机位置，和目标网站的横向拖动控制X轴、纵向拖动控制Z轴逻辑一致
  camera.position.x -= deltaMove.x * 0.05;
  camera.position.z -= deltaMove.y * 0.05;

  // 更新上一次鼠标位置
  previousMousePosition.x = event.clientX;
  previousMousePosition.y = event.clientY;
});

// 鼠标松开事件
document.addEventListener("mouseup", function() {
  isMouseDown = false;
  document.body.classList.remove("grabbing");
  document.body.classList.add("grab");
});

// 鼠标离开窗口时也要重置状态，防止拖动到窗口外后状态异常
document.addEventListener("mouseleave", function() {
  isMouseDown = false;
  document.body.classList.remove("grabbing");
  document.body.classList.add("grab");
});

额外说明 #

1. 移除了jQuery依赖，换成原生JS的classList操作，兼容性更好且无需额外引入库
2. 添加了mouseleave事件监听，避免鼠标拖动到浏览器窗口外后，松开鼠标仍保持拖动状态的问题
3. 增加了isMouseDown状态标记，确保只有按住鼠标拖动时才会移动相机
4. 相机移动逻辑移到mousemove事件中，实现拖动过程中的实时响应

内容的提问来源于stack exchange，提问作者Sencerhan.Com