ThreeJS新手求助：如何实现OBJ模型加载前的加载界面

嘿，作为ThreeJS新手能考虑到做加载界面这点真的很棒——这对用户体验提升特别大！我来给你一步步拆解怎么实现：

1. 先添加HTML和CSS的加载界面元素 #

首先在你的HTML里，给container外面加一个全屏的加载遮罩层，用来在资源加载时显示：

<!-- 加载遮罩层 -->
<div id="loader-overlay">
  <div class="loader-spinner"></div>
  <p class="loader-text">正在加载3D模型...</p>
</div>

<div id="container"></div>

然后添加对应的CSS样式，让遮罩层覆盖全屏，加载动画居中显示：

#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在ThreeJS画布上方 */
}

/* 旋转加载动画 */
.loader-spinner {
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.2s linear infinite;
}

.loader-text {
  color: #ffffff;
  font-size: 18px;
  margin-top: 20px;
  font-family: Arial, sans-serif;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. 用ThreeJS的LoadingManager统一管理资源加载 #

如果你同时加载模型、HDR环境图、纹理等多个资源，强烈推荐用LoadingManager——它能监听所有资源的加载状态，比单独监听每个加载器更可靠：

// 创建加载管理器
const loadingManager = new THREE.LoadingManager();

// 所有资源加载完成时触发：隐藏加载界面
loadingManager.onLoad = function() {
  console.log("所有资源加载完成！");
  document.getElementById("loader-overlay").style.display = "none";
};

// 可选：监听加载进度，用来做进度条
loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) {
  const progressPercent = Math.round((itemsLoaded / itemsTotal) * 100);
  console.log(`加载进度：${progressPercent}%`);
  // 如果你想做进度条，可以在这里更新DOM：
  // document.querySelector(".loader-text").textContent = `加载中... ${progressPercent}%`;
};

// 可选：监听加载错误
loadingManager.onError = function(url) {
  console.error(`资源加载失败：${url}`);
  document.querySelector(".loader-text").textContent = "加载出错了，请刷新重试";
};

3. 给你的加载器绑定管理器 #

把LoadingManager传给所有需要加载资源的加载器（比如OBJLoader、RGBELoader）：

// 初始化OBJLoader并绑定加载管理器
const objLoader = new THREE.OBJLoader(loadingManager);

// 加载OBJ模型
objLoader.load(
  "你的模型路径.obj",
  function(object) {
    // 模型加载完成后的逻辑：添加到场景、调整位置等
    scene.add(object);
    object.position.set(0, 0, 0);
  },
  function(xhr) {
    // 可选：单个模型的加载进度
    console.log(`模型加载进度：${Math.round((xhr.loaded / xhr.total) * 100)}%`);
  },
  function(error) {
    console.error("模型加载失败：", error);
  }
);

// 你的HDR加载也用同一个管理器
const hdrLoader = new THREE.RGBELoader(loadingManager);
hdrLoader.load("你的HDR路径.hdr", function(texture) {
  // 处理HDR环境图的逻辑
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
});

4. 单个模型加载的简化方案 #

如果你只需要加载单个OBJ模型，也可以不用LoadingManager，直接在模型加载完成的回调里隐藏加载界面：

const objLoader = new THREE.OBJLoader();

objLoader.load(
  "你的模型路径.obj",
  function(object) {
    scene.add(object);
    // 模型加载完成，隐藏加载界面
    document.getElementById("loader-overlay").style.display = "none";
  },
  // 进度和错误回调可选
);

小提示 #

• 加载界面的样式可以根据你的配置器风格调整，比如换颜色、加品牌logo
• 如果模型很大，进度条能让用户更清楚加载状态，比单纯的 spinner 更友好

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