Three.js项目游戏式加载屏setInterval失效或异常问题求助

你的代码存在三个核心问题：

• 传递给animateText的是全局counter的初始值，函数内部的counter是局部变量，修改后不会同步到全局，导致定时器每次触发都在重复操作前两个文本元素
• 未处理边界情况，当counter走到最后一个元素时，counter+1会超出数组索引范围，引发错误
• 初始状态没有隐藏多余文本，导致所有内容同时显示

修正后的基础代码 #

const loadingtexts = document.querySelectorAll(".loading-text");
let counter = 0;

// 初始状态：只显示第一个文本，其余隐藏
loadingtexts.forEach((text, index) => {
  text.style.display = index === 0 ? "block" : "none";
});

let myInterval = setInterval(() => {
  // 隐藏当前显示的文本
  loadingtexts[counter].style.display = "none";
  // 更新计数器，循环回到开头
  counter = (counter + 1) % loadingtexts.length;
  // 显示下一个文本
  loadingtexts[counter].style.display = "block";
}, 5000);

// 资源加载完成后记得清除定时器
// function onAssetsLoaded() {
//   clearInterval(myInterval);
//   // 隐藏加载屏逻辑
// }

优化方案（解决闪烁问题） #

直接修改display会导致生硬闪烁，用CSS过渡实现平滑切换：

1. CSS样式：

.loading-text {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: absolute; /* 确保所有文本在同一位置 */
}

.loading-text.active {
  opacity: 1;
  visibility: visible;
}

2. 对应JS代码：

const loadingtexts = document.querySelectorAll(".loading-text");
let counter = 0;

// 初始状态激活第一个文本
loadingtexts[0].classList.add("active");

let myInterval = setInterval(() => {
  loadingtexts[counter].classList.remove("active");
  counter = (counter + 1) % loadingtexts.length;
  loadingtexts[counter].classList.add("active");
}, 5000);

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