threejs 获取多个模型的加载总进度

要获取多个模型的加载总进度，您可以使用 Three.js 中的 `THREE.LoadingManager` 类，它可以跟踪多个加载项的进度，并在所有加载项完成加载时触发回调函数。

以下是实现此功能的基本步骤：

1. 创建一个 `THREE.LoadingManager` 实例，并指定要加载的模型数量。

var manager = new THREE.LoadingManager();
manager.setURLModifier(function(url) {
  return url + "?v=" + Date.now(); // 避免缓存
});
var loader = new THREE.JSONLoader(manager);
var totalModels = 3; // 假设要加载3个模型

2. 监听 `onProgress` 事件，以获取每个加载项的进度，计算总进度。

var loadedModels = 0;
manager.onProgress = function ( item, loaded, total ) {
  var progress = (loaded / total * 100).toFixed(2);
  console.log( "Loading progress: " + progress + "%" );
};

3. 监听 `onLoad` 事件，以判断所有加载项是否都已完成加载，如果是，则触发回调函数。

manager.onLoad = function() {
  console.log( "All models loaded!" );
  // 执行回调函数
  callback();
};

完整的代码示例如下：

var manager = new THREE.LoadingManager();
manager.setURLModifier(function(url) {
  return url + "?v=" + Date.now(); // 避免缓存
});
var loader = new THREE.JSONLoader(manager);
var totalModels = 3; // 假设要加载3个模型
var loadedModels = 0;

manager.onProgress = function ( item, loaded, total ) {
  var progress = (loaded / total * 100).toFixed(2);
  console.log( "Loading progress: " + progress + "%" );
};

manager.onLoad = function() {
  console.log( "All models loaded!" );
  // 执行回调函数
  callback();
};

loader.load( "model1.json", function ( geometry, materials ) {
  loadedModels++;
} );

loader.load( "model2.json", function ( geometry, materials ) {
  loadedModels++;
} );

loader.load( "model3.json", function ( geometry, materials ) {
  loadedModels++;
} );

希望这个回答能帮到您！