Using Three.js : THREE.VTKLoader() to assign an ID for an event

Question

Using Three.js : THREE.VTKLoader() to assign an ID for an event

I have been attempting to load multiple .vtk files using a for loop in the following manner:

for (var i = 0; i < vtkFilesArray.length; i++) {
    var loader = new THREE.VTKLoader();
    loader.load( i+".vtk", function ( geometry ) {

        console.log(geometry);

        geometry.center();
        geometry.computeVertexNormals();

        var mesh = new THREE.Mesh( geometry, material );
        mesh.position.set( - 0.075, 0.005, 0 );
        mesh.scale.multiplyScalar( 0.2 );
        scene.add( mesh );

    });
}

However, once I obtain the geometry, there is no unique file ID associated with the mesh. Is there a method to pass the file ID along with the geometry data or attach an ID to the events being dispatched?

javascript three.js

Answer 1

Answer №1

If you want to pass the ID along, one approach is to use closures to encapsulate the variable i within its own function. For more details on closures, check out this informative post -> How do JavaScript closures work?

for (var i = 0; i < vtkFilesArray.length; i++) {
     (function(fileName){
        var loader = new THREE.VTKLoader();
        loader.load( fileName +".vtk", function ( geometry ) {

            console.log(geometry);

            geometry.center();
            geometry.computeVertexNormals();

            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.set( - 0.075, 0.005, 0 );
            mesh.scale.multiplyScalar( 0.2 );
            mesh.fileID = fileName;
            scene.add( mesh );

        } );
    }(i));
}

Answer 2

If you want to pass the ID along, one approach is to use closures to encapsulate the variable i within its own function. For more details on closures, check out this informative post -> How do JavaScript closures work?

for (var i = 0; i < vtkFilesArray.length; i++) {
     (function(fileName){
        var loader = new THREE.VTKLoader();
        loader.load( fileName +".vtk", function ( geometry ) {

            console.log(geometry);

            geometry.center();
            geometry.computeVertexNormals();

            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.set( - 0.075, 0.005, 0 );
            mesh.scale.multiplyScalar( 0.2 );
            mesh.fileID = fileName;
            scene.add( mesh );

        } );
    }(i));
}

Using Three.js : THREE.VTKLoader() to assign an ID for an event

Answer №1

Similar questions

Can the vacant space on an HTML page be determined through calculation?

The iPhone webview keyboard causes the layout to be pushed upward and remain elevated

Extract data from a JSON-encoded array using JavaScript

Transmitting unique characters, such as a caron symbol, via xmlhttp.responseText and encoding them with json_encode

Maximizing the efficiency of threejs through combining and selecting items

Iterate through each element in all arrays, but limit the loop to only iterate through the elements in the first array up to its

JavaScript function following AJAX request

Executing a function without a callback within an Async library

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Using React and Material UI to create a table filtering system with checkboxes

Tips on implementing the onChange event in a custom text input for React Native applications

What is the process for loading this image?

Create a path on the Google Map that follows the designated route

Is there a way to use SCTP with Socket.io and Node.js?

Modifying class selectors does not have any effect on newly added items

Using Regular Expressions in Express routing

How can I change a PHP for loop to Javascript?

Rearrange an irregular matrix using JavaScript

Troublesome GSP: JavaScript not functioning properly in Gr

Checkbox in Angular FormGroup not triggering touched state