Three.js添加多个纹理平面出现位置错乱/重复异常求助

你遇到的问题大概率是异步操作的顺序和作用域问题导致的——Firebase获取URL、Three.js加载纹理都是异步的，如果没处理好，很容易出现纹理和预设位置不匹配，或者多个平面共享同一个纹理的情况。我帮你拆解下常见的错误点，再给出具体的修复方案：

常见错误原因 #

1. 循环中的作用域陷阱 #

如果你用了普通的for(var i...)循环，异步回调执行时，循环变量i已经变成了循环结束的最终值，导致所有平面都绑定到最后一个位置，或者取错对应的URL。

2. 异步流程顺序失控 #

Firebase获取URL和TextureLoader加载纹理都是异步的，多个请求的完成顺序不一定和你遍历位置数组的顺序一致，这就会导致纹理“串位”。

3. 复用材质/纹理对象 #

如果你在循环中复用同一个MeshMaterial实例，所有平面会共享这个材质的纹理，自然会出现重复显示的问题。

具体修复方案 #

方案一：用async/await+forEach保证一一对应 #

把每个平面的创建流程（获取URL→加载纹理→创建平面→设置位置）封装成独立的异步函数，用forEach遍历位置数组，确保每个位置对应一次完整的异步流程：

// 假设你的位置数组
const planePositions = [
  new THREE.Vector3(-4, 0, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(4, 0, 0)
];

// 封装单个平面的创建逻辑
async function buildTexturedPlane(targetPosition) {
  // 1. 从Firebase异步获取图片URL（替换成你的实际Firebase调用）
  const imageUrl = await getImageUrlFromFirebase();
  
  // 2. 用Promise封装TextureLoader，等待纹理加载完成
  const textureLoader = new THREE.TextureLoader();
  const texture = await new Promise((resolve, reject) => {
    textureLoader.load(
      imageUrl,
      (loadedTex) => resolve(loadedTex),
      undefined, // 进度回调可选
      (err) => reject(err)
    );
  });
  
  // 3. 为每个平面创建独立的材质和几何体
  const planeGeo = new THREE.PlaneGeometry(3, 3);
  const planeMat = new THREE.MeshBasicMaterial({ map: texture });
  const planeMesh = new THREE.Mesh(planeGeo, planeMat);
  
  // 4. 设置目标位置并添加到场景
  planeMesh.position.copy(targetPosition);
  scene.add(planeMesh);
}

// 遍历位置数组，逐个创建平面
planePositions.forEach(async (pos) => {
  await buildTexturedPlane(pos);
});

方案二：先批量获取所有URL，再按索引绑定位置 #

如果需要确保URL和位置严格按索引对应，可以先从Firebase批量拉取所有图片URL，再和位置数组一一匹配加载：

async function initAllPlanes() {
  const planePositions = [/* 你的位置数组 */];
  
  // 第一步：批量获取所有图片URL（确保返回的数组和位置数组长度一致）
  const imageUrls = await fetchAllImageUrlsFromFirebase();
  
  if (imageUrls.length !== planePositions.length) {
    console.error("位置数组和图片URL数组长度不匹配！");
    return;
  }

  const textureLoader = new THREE.TextureLoader();
  
  // 用let声明循环变量，保证作用域独立
  for (let i = 0; i < planePositions.length; i++) {
    const currentPos = planePositions[i];
    const currentUrl = imageUrls[i];
    
    try {
      const texture = await new Promise((resolve, reject) => {
        textureLoader.load(currentUrl, resolve, undefined, reject);
      });
      
      const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(3,3),
        new THREE.MeshBasicMaterial({ map: texture })
      );
      plane.position.copy(currentPos);
      scene.add(plane);
    } catch (err) {
      console.error(`加载第${i+1}个平面失败:`, err);
    }
  }
}

// 启动初始化
initAllPlanes();

关键注意点 #

• 用let或forEach处理循环作用域：避免var导致的变量共享问题，确保每个异步回调能捕获到当前循环的位置/URL。
• 每个平面用独立材质：每次创建平面时都new一个MeshBasicMaterial，不要复用同一个实例，否则所有平面会共享纹理。
• 用Promise+await控制异步流程：保证URL获取、纹理加载完成后再创建平面，避免顺序混乱。

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