Three.js模型依次渲染问题：如何实现多模型同时加载渲染？

你看到的“模型依次渲染”其实是模型被逐个添加到场景导致的视觉效果——Three.js本身每帧会一次性渲染场景内所有可见对象，不会逐个渲染网格。要实现所有模型同时显示，核心是确保所有模型准备完成后，一次性加入场景。

具体修复步骤 #

1. 修正Group的使用逻辑
   必须先创建好Floor、Walls、Roof的所有网格，再统一添加到Group，最后将整个Group加入场景，而非创建一个就添加一个。

   • 错误写法（会导致依次显示）：

     // 逐个创建并添加
     const floor = createFloor()
     const houseGroup = new THREE.Group()
     houseGroup.add(floor)
     scene.add(houseGroup)
     
     const walls = createWalls()
     houseGroup.add(walls)
     
     const roof = createRoof()
     houseGroup.add(roof)
     

   • 正确写法（一次性添加）：

     // 先创建所有模型
     const floor = createFloor()
     const walls = createWalls()
     const roof = createRoof()
     
     // 统一组合后加入场景
     const houseGroup = new THREE.Group()
     houseGroup.add(floor, walls, roof)
     scene.add(houseGroup)
     

2. 排查异步加载的影响
   如果你的模型用到了异步加载的纹理或外部几何体，部分模型可能因资源未加载完成延迟显示。此时需要用Promise.all()等待所有资源加载完毕，再创建并添加模型：

   Promise.all([
     loadTexture('/textures/floor.jpg'),
     loadTexture('/textures/walls.jpg'),
     loadTexture('/textures/roof.jpg')
   ]).then(([floorTex, wallsTex, roofTex]) => {
     const floor = createFloor(floorTex)
     const walls = createWalls(wallsTex)
     const roof = createRoof(roofTex)
   
     const houseGroup = new THREE.Group()
     houseGroup.add(floor, walls, roof)
     scene.add(houseGroup)
   })
   

3. 检查动画循环内的操作
   绝对不要在requestAnimationFrame的回调函数里逐个添加模型，否则每帧添加一个，必然会出现依次显示的效果。所有模型的创建与组合操作都要放在动画循环之外完成。

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