The onProgress event of THREE.JS Loader will only be triggered once the loading process has been successfully completed

Despite following numerous tutorials, I am struggling to receive regular updates on the loading progress when loading a model in order to create a loading icon. No matter what method I try, the onProgress function only triggers once, and that's after the loading has already completed.

Here is my TypeScript loader code:

// 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);
   });
}

The log:

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

Currently, I only see one log message after the model finishes loading. How can I resolve this issue?

Answer №1

Check out the code snippet below for a solution.

    // Initialize loading manager
    private manager = new THREE.LoadingManager();

    // Configure loading manager (within class constructor)
    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 ); // added onProgress and onError callbacks...
    }

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

    private onError ( xhr ) {
      console.log("This function will be called when an error occurs.");
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The resource-intensive nature of ExpressJs HTTP Streaming is causing my disk space to deplete rapidly

My express server app.get('/data', (_, res) => { const interval = setInterval( () => res.write(`${Math.random().toString()}\n`), 1000 ); res.on('close', () => { clearInterval(interval); ...

The information retrieved from the API call did not meet my expectations; instead, it returned as undefined

In my development project, I have organized my functions in a file called PostApi.js. In another file, Posts.js, I make the call to these functions. However, when using api.getPosts() and data in the Posts.js file, I encounter an issue where it returns un ...

Child component does not receive props when onPress event is triggered

After trying to follow the solution I found online on how to pass props to a Child component, I realized that it didn't work for me. Even though I know that navigation.navigate can be used to pass the result of ImagePick without using props, I specifi ...

Error TS2309: TypeScript encountered an error in Types/node/index.d.ts

I recently upgraded my .Net Core Angular 2 project using SystemJs from Typings to @Types. The entire project has been rebuilt with the latest VS tooling for .Net Core 1.0.1, TypeScript 2.0.10, and Node.js 7.0.0 as of 12/21/2016. Everything was working fi ...

Elevate your tooltips with Bootstrap 5: enabling hoverable tooltips and clickable links

At times, you may want to include clickable links in tooltips. I recently encountered this issue while using Bootstrap 5 and had trouble finding a solution. After some trial and error, I finally figured it out and wanted to share my findings. The standard ...

Problem encountered when attempting to use 'delete' as a property name

I am currently encountering an issue with a form that deletes a gallery from a database. Previously, the code was functioning properly but after some recent updates such as switching from jquery.interface to jquery-ui, I am now facing difficulties. Wheneve ...

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

In my current project, I am implementing the taphold event and require the coordinates of the tapped point by the user. However, I have encountered an issue where event.clientX and event.clientY are returning as undefined (you can see the example here: her ...

I keep encountering a 404 error page not found whenever I try to use the useRouter function. What could

Once the form is submitted by the user, I want them to be redirected to a thank you page. However, when the backend logic is executed, it redirects me to a 404 page. I have checked the URL path and everything seems to be correct. The structure of my proje ...

Update the withCredentials property to utilize the latest ES6 integrated HTTP request tool known as Fetch

What is the correct way to set withCredentials=true for a fetch promise return? fetch(url,{ method:'post', headers, withCredentials: true }); It seems like the MDN documentation covers everything about http-requesting, except for the u ...

The intervals in hooks seem to be malfunctioning and not updating the date and time as expected

I am trying to continuously update the date and time every minute using React hooks. However, I am facing difficulty in updating the time properly. const Link = (props) => { let date = new Date(); const [dateTime, setDateTime] = useState({ cu ...

Customizing tab menu functionality for specific click actions

I have created a simple HTML tab menu with JavaScript that allows for changing content when tabs are clicked. test.html <!DOCTYPE html> <html> <head> <title>My Menu Test</title> <style type="text/css" media="all"& ...

Required file missing in React application unable to locate

I have a project organized in the following way: - my-app - src - some files - public - index.html - ... When I run npm start, the application functions as expected. Now, I am looking to rename src to application! After renami ...

Achieving margins readiness in JavaScript before the document is fully loaded

Currently, I am implementing a feature on my website that detects and adjusts the layout both when the page first loads and when the browser window is resized. However, I have encountered an issue that I overlooked. The problem arises from reading CSS valu ...

Optimizing React App Development: Configuring dev-server for optimal port performance

Looking for a way to set your own script to the BROWSER environment variable? Check out the guide at https://facebook.github.io/create-react-app/docs/advanced-configuration. In my script, I want to direct users to another page with a query parameter that ...

Leveraging AJAX to send a form filled with dynamic content to multiple destinations

I have a hidden form that needs to be submitted to two different locations. The form is automatically filled using the .val method in jQuery. How can I write the ajax script to submit this form to two different locations? Is it possible to do this without ...

What role does the --example flag play in the creation of a NextJs application?

Recently, I started diving into NextJs and stumbled upon a command used to initialize a new NextJs App npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" I'm curious a ...

Why are optional members utilized in a TypeScript interface?

Currently, I am engaged in an online tutorial on typescript (although it is not in English, I will translate the example): interface Message { email: string; receiver?: string; subject?: string; content: string; } The concept of the ...

The implementation of automatic meta tag generation functionality in Wordpress is experiencing some technical glitches and is not functioning

I am in need of a solution to automatically generate meta tags from content in Wordpress. The issue lies in the code I have come across on various blogs during my search, as it either uses $des_post = str_replace( array( "\\n", "&b ...

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

Initially, I imported a basic "database" object from another file that contains an array of students. I then used map to iterate through the student array and display all the students on the window object. Everything was working fine until I attempted to ...