Tips for sending an extra parameter to the callback function when using the loader.parse method in Three.js

Question

Tips for sending an extra parameter to the callback function when using the loader.parse method in Three.js

The Parse method of the Loader object in three.js allows you to specify a callback function that will be triggered upon completion of the parsing process. This callback will receive a unique argument which represents the parsed object.

However, I am encountering an issue where I need to pass an additional argument to the callback function. This is because I am using the parse method within a loop and I want to create multiple callbacks, each with a specific value of a variable.

Currently, if I set this value within the loop but outside the callback function, the callback always receives the last value that was set in the loop. This is not the desired behavior.

Below is the code snippet:

for(var foldcont_index in foldcont) {
    var foldit = foldcont[foldcont_index];

    if(foldit.isDirectory()) {
        loadBFiles(fold+'/'+foldit.name);
    }

    if(foldit.isFile()) {
        var buigltf = fs.readFileSync(fold+'/'+foldit.name, 'utf8');
        loader.parse(
            buigltf,
            undefined,
            function(o) {
                var oname= // !!! before issue with foldit.name
                objectstank['xxx_'+oname]= o;
                loadpoint = loadpoint + loadpercentage;
                loadbar.set(loadpoint);
                if(loadpoint >= 100) { document.getElementById("load-bar").style.display = 'none'; }
            },
            undefined
        );
    }
}

Can anyone offer a solution to this issue?

javascript three.js

Answer 1

Answer №1

Take a look at closures in JavaScript

Unlike in languages such as C/C++, JavaScript makes it easy to "close over variables," eliminating the need for extra parameters in callbacks. You can always access the necessary variables in a callback by using a closure.

In the specific case mentioned:

for(var foldcont_index in foldcont) {

    var foldit= foldcont[foldcont_index];

    if(foldit.isDirectory()) { loadBFiles(fold+'/'+foldit.name); }

    if(foldit.isFile()) {

      var buigltf= fs.readFileSync(fold+'/'+foldit.name, 'utf8');
      loader.parse(
          buigltf,
          undefined,
          function(oname) {
              return function(o) {
                  var oname= // !!! before issue with foldit.name
                  objectstank['xxx_'+oname]= o;
                  loadpoint= loadpoint+loadpercentage;
                  loadbar.set(loadpoint);
                  if(loadpoint>= 100) { document.getElementById("load- bar").style.display= 'none'; }
              };
          }(foldit.name),
          undefined
      );

    }
}

could potentially work. (I can understand your code). I am not aware of any Loader object within Three.js. There are several XXXLoader objects, but it is unclear which one you are using.

This pattern:

function(var1, var2, var3) {
   return function() {
      // do something with var1, var2, var3
   };
}(value1, value2, value3);

is a common pattern for closing over values. The code is a function that returns another function which has "closed" over var1, var2, and var3.

This allows you to pass the returned function to a callback. For example:

function makeCallback(var1, var2, var3) {
   return function() {
     console.log(var1, var2, var3);
   };
}

const fn = makeCallback('Hello', 'World', '!');
setTimeout(fn, 1000);

An inline version:

for (let i = 1; i <= 4; ++i) {
  setTimeout(function(var1) {
     return function() {
        console.log(var1);
     };
  }(i), i * 500);
}

Answer 2

Take a look at closures in JavaScript

Unlike in languages such as C/C++, JavaScript makes it easy to "close over variables," eliminating the need for extra parameters in callbacks. You can always access the necessary variables in a callback by using a closure.

In the specific case mentioned:

for(var foldcont_index in foldcont) {

    var foldit= foldcont[foldcont_index];

    if(foldit.isDirectory()) { loadBFiles(fold+'/'+foldit.name); }

    if(foldit.isFile()) {

      var buigltf= fs.readFileSync(fold+'/'+foldit.name, 'utf8');
      loader.parse(
          buigltf,
          undefined,
          function(oname) {
              return function(o) {
                  var oname= // !!! before issue with foldit.name
                  objectstank['xxx_'+oname]= o;
                  loadpoint= loadpoint+loadpercentage;
                  loadbar.set(loadpoint);
                  if(loadpoint>= 100) { document.getElementById("load- bar").style.display= 'none'; }
              };
          }(foldit.name),
          undefined
      );

    }
}

could potentially work. (I can understand your code). I am not aware of any Loader object within Three.js. There are several XXXLoader objects, but it is unclear which one you are using.

This pattern:

function(var1, var2, var3) {
   return function() {
      // do something with var1, var2, var3
   };
}(value1, value2, value3);

is a common pattern for closing over values. The code is a function that returns another function which has "closed" over var1, var2, and var3.

This allows you to pass the returned function to a callback. For example:

function makeCallback(var1, var2, var3) {
   return function() {
     console.log(var1, var2, var3);
   };
}

const fn = makeCallback('Hello', 'World', '!');
setTimeout(fn, 1000);

An inline version:

for (let i = 1; i <= 4; ++i) {
  setTimeout(function(var1) {
     return function() {
        console.log(var1);
     };
  }(i), i * 500);
}

Answer 3

Answer №2

This code snippet is a clear example of how to dynamically add "initially invisible" models to a scene and manage their visibility. The callback function in the class handles the addition of these models to the scene and a list, allowing for dynamic control over when and where they appear.

import { GLTFLoader } from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6f73697e7e5b2b352a2828352a">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js'

export class transitVehicleSystem {

  constructor(scene, dParamWithUnits, numWedges) {

    this.scene = scene
    this.unallocatedTransitVehicleModels = []

    function prepareACallbackFunctionForLoader(myScene, myList) {
      return function( {scene} ) {
        const object = scene.children[0]
        object.visible = false
        for (let i=0; i<dParamWithUnits['numTransitVehicleModels'].value; i++) {
          const tempModel = object.clone()
          myScene.add(tempModel)
          myList.push(tempModel)
        }
      } 
    }
    const addTransitVehicles = prepareACallbackFunctionForLoader(this.scene, this.unallocatedTransitVehicleModels)

    const loader = new GLTFLoader()
    loader.load('models/TransitCar.glb',
      // pass in the callback function that was created within a closure
      addTransitVehicles,
      // called when loading is in progresses
      function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% transit car loaded' );
      },
      // called when loading has errors
      function ( error ) {
        console.log( 'An error happened', error );
      }
    )
  
    console.log(this.unallocatedTransitVehicleModels)
  
  }
*
*

Answer 4

This code snippet is a clear example of how to dynamically add "initially invisible" models to a scene and manage their visibility. The callback function in the class handles the addition of these models to the scene and a list, allowing for dynamic control over when and where they appear.

import { GLTFLoader } from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6f73697e7e5b2b352a2828352a">[email protected]</a>/examples/jsm/loaders/GLTFLoader.js'

export class transitVehicleSystem {

  constructor(scene, dParamWithUnits, numWedges) {

    this.scene = scene
    this.unallocatedTransitVehicleModels = []

    function prepareACallbackFunctionForLoader(myScene, myList) {
      return function( {scene} ) {
        const object = scene.children[0]
        object.visible = false
        for (let i=0; i<dParamWithUnits['numTransitVehicleModels'].value; i++) {
          const tempModel = object.clone()
          myScene.add(tempModel)
          myList.push(tempModel)
        }
      } 
    }
    const addTransitVehicles = prepareACallbackFunctionForLoader(this.scene, this.unallocatedTransitVehicleModels)

    const loader = new GLTFLoader()
    loader.load('models/TransitCar.glb',
      // pass in the callback function that was created within a closure
      addTransitVehicles,
      // called when loading is in progresses
      function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% transit car loaded' );
      },
      // called when loading has errors
      function ( error ) {
        console.log( 'An error happened', error );
      }
    )
  
    console.log(this.unallocatedTransitVehicleModels)
  
  }
*
*

Tips for sending an extra parameter to the callback function when using the loader.parse method in Three.js

Answer №1

Answer №2

Similar questions

Instead of returning a single array of data from a form as expected, Jquery is returning two arrays

Formatting numbers as floating point values in AngularJS

Mastering the Art of jQuery Function Chaining for Beginners

Prevent ui-select from being highlighted when clicked

Problem with character encoding in Node.js

Organizing data in TypeScript

Exploring an Array in Javascript derived from a PHP Array

Uh oh! You haven't set a QueryClient yet. Make sure to use QueryClientProvider to set

Obtaining information from node.js module to the server.js script

Searching for values using keys in Angular

Leveraging Backbone.js without using client-side JavaScript

using async.waterfall with async.apply

Is there a way to prevent this JavaScript code from deleting the initial row of my table?

Leveraging TypeScript to share information between directives in AngularJS through asynchronous calls

Exploring the possibilities of utilizing React server components in my project

Numerous documents within a JavaScript application

When it comes to adjusting the height of an element, there are two ways to go about it: using $(element).height

Can a single global variable be shared between a JavaScript file and a TypeScript file within an Angular project?

Listening for button clicks in a Bootstrap drop down menu using JavaScript

Converting CSS code into JavaScript