THREE.JS Loader onProgressは、ロード完了後に1回だけ起動します。

Question

ローディングの進捗状況を定期的に更新するためにモデルをロードするときに、どのようにしてローディングアイコンを作成できるかを確認するにはどうすればよいですか？私が見つけることができるすべてのトーナリーをたどってきましたが、すべての答えで、onProgressメソッドはロードが終了するとすぐに1回だけ起動します。

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 

TEモデルがロードされた後、私はこれだけのログを取得します。これをどうすれば解決できますか？

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."); 
    };