如何在Three.js中按顺序依次显示多对象（间隔0.5秒）

刚好做过类似的需求，给你整理个清晰的实现思路和代码修改方案：

首先我们需要几个状态变量来控制显示节奏，然后在渲染循环里通过时间判断来切换Mesh的可见性：

步骤1：定义控制变量 #

在你的场景初始化代码里（全局或合适的作用域）添加这几个变量：

let currentIndex = 0; // 当前显示的Mesh索引
const displayDuration = 500; // 每个Mesh的停留时长，单位毫秒（这里是0.5秒）
let lastSwitchTime = Date.now(); // 记录上一次切换的时间戳

步骤2：初始化Mesh时默认隐藏 #

修改你创建Mesh的循环，把所有Mesh默认设置为不可见，之后再手动开启第一个的可见性：

for ( var i = 0; i < count; i ++ ) {
  // 你的geometry和material创建逻辑保持不变
  var mesh = new THREE.Mesh(geometry, material);
  mesh.visible = false; // 默认隐藏所有Mesh
  scene.add(mesh);
  objects.push(mesh);
}
// 初始显示第一个Mesh
objects[currentIndex].visible = true;

步骤3：在渲染循环里实现切换逻辑 #

修改你的render函数，加入时间判断和切换逻辑：

function render() {
  requestAnimationFrame(render);
  
  const now = Date.now();
  // 检查是否到达切换时间
  if (now - lastSwitchTime >= displayDuration) {
    // 隐藏当前显示的Mesh
    objects[currentIndex].visible = false;
    // 切换到下一个索引（用取模实现循环显示，到最后一个后回到第一个）
    currentIndex = (currentIndex + 1) % objects.length;
    // 显示新的Mesh
    objects[currentIndex].visible = true;
    // 更新切换时间戳
    lastSwitchTime = now;
  }
  
  renderer.render(scene, camera);
}

可选调整：如果不需要循环显示 #

如果你希望到最后一个Mesh就停止切换（而不是回到第一个），把索引切换的代码改成这样：

currentIndex += 1;
if (currentIndex < objects.length) {
  objects[currentIndex].visible = true;
} else {
  // 这里可以根据需求处理，比如停留在最后一个Mesh
  currentIndex = objects.length - 1;
  // 或者如果要全部隐藏，可以取消下面的注释，同时去掉上面的currentIndex赋值
  // objects.forEach(mesh => mesh.visible = false);
}

这个方案的核心是利用Date.now()获取时间戳，对比间隔来触发切换，避免用setTimeout这类和渲染循环不同步的方法，保证动画的流畅性。

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