javascript - THREE.JS Loader onProgress 仅在加载完成后触发一次

Question

如何确保在加载模型时定期更新加载进度，以便我可以构建加载图标。我已经跟踪了我能找到的每一个图例，但对于每个答案，onProgress 方法只会在加载完成后触发一次。

我的 typescript 加载器代码:

// Load manager
private manager = new THREE.LoadingManager();

// Set up loading manager (in constructor of class)
this.manager.onProgress = function ( item, loaded, total ) {
  console.log( item, loaded, total );
};


// Load OBJ File from Server
private loadFile(path) {
   let loader = new THREE.OBJLoader(this.manager)
   loader.load(path, (obj)=>{
      this.model = obj;
      this.boundingBox = new THREE.BoxHelper(obj)
      this.scene.add(this.model);
   });
}

日志:

http://localhost:5000/api/file/largeModels/z3.obj 1 1

我仅在加载模型后才收到此日志。我该如何解决这个问题？

Answer 1

尝试以下代码。

    // Load manager

    private manager = new THREE.LoadingManager();

    // Set up loading manager (in constructor of class)
    this.manager.onProgress = function ( item, loaded, total ) {
      console.log( item, loaded, total );
    };


    // Load OBJ File from Server
    private loadFile(path) {
       let loader = new THREE.OBJLoader(this.manager)
       loader.load(path, (obj)=>{
          this.model = obj;
          this.boundingBox = new THREE.BoxHelper(obj)
          this.scene.add(this.model);
       },this.onProgress, this.onError ); // onProgress, onError added....
    }

    private onProgress ( xhr ) {
      if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete) + '% downloaded' );
      }
    };

    private onError ( xhr ) {
      console.log("Will call when error occure.");
    };