关于将Three.js鼠标触发背景光点改为自动随机晃动的技术问询

要把原来依赖鼠标移动的背景光点改成自动随机晃动，核心思路就是替换mouseX和mouseY的输入源——从鼠标位置改成自动生成的随机值，同时保留原有的光点渲染逻辑。下面是具体的实现步骤和代码示例：

1. 移除原鼠标移动事件监听 #

首先，找到你代码中绑定鼠标移动事件的部分，把它注释或删除掉，比如：

// 注释掉原鼠标监听，不再依赖鼠标输入
// document.addEventListener('mousemove', onDocumentMouseMove);

2. 自动生成随机位置（两种方案） #

方案一：直接随机突变（简单粗暴） #

如果想要光点快速随机跳动，直接在动画循环里每次生成新的随机mouseX和mouseY即可，数值范围和原鼠标逻辑保持一致：

function animate() {
  requestAnimationFrame(animate);
  
  // 模拟鼠标位置的随机偏移，和原逻辑范围匹配
  // 原逻辑是 (event.clientX - windowHalfX) * 10，所以范围是 -windowHalfX*10 到 +windowHalfX*10
  mouseX = (Math.random() - 0.5) * windowHalfX * 20;
  mouseY = (Math.random() - 0.5) * windowHalfY * 20;
  
  // 原有的渲染逻辑（比如更新光点、渲染场景）
  render();
}

方案二：缓动随机移动（更自然平滑） #

如果想要光点像真实鼠标一样缓慢晃动、有过渡效果，可以用缓动算法让它逐渐移动到随机目标点，视觉效果更自然：

// 新增目标位置变量，用来存储随机目标点
let targetMouseX = 0;
let targetMouseY = 0;
// 缓动系数，数值越小移动越平滑（0.05~0.2之间都可以）
const easeSpeed = 0.08;

function animate() {
  requestAnimationFrame(animate);
  
  // 随机触发目标位置更新（比如每1-3秒换一次目标，可通过概率调整）
  if (Math.random() < 0.005) {
    // 生成和原鼠标逻辑一致范围的目标点
    targetMouseX = (Math.random() - 0.5) * windowHalfX * 20;
    targetMouseY = (Math.random() - 0.5) * windowHalfY * 20;
  }
  
  // 缓动逼近目标位置
  mouseX += (targetMouseX - mouseX) * easeSpeed;
  mouseY += (targetMouseY - mouseY) * easeSpeed;
  
  // 原有的渲染逻辑
  render();
}

3. 验证效果 #

两种方案都不需要修改原有的render()函数（也就是处理光点渲染的逻辑），因为我们只是替换了mouseX和mouseY的生成方式，原逻辑依然可以正常使用这些值来控制光点位置。

这样修改后，页面加载后光点就会自动随机晃动，完全不需要鼠标操作啦～

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