How can I choose a mesh in three.js that is not part of the loader?

I'm facing a challenge with changing the material of a mesh using three.js's mesh loader. Although I can easily change the material within the loader, I encounter an issue where I can no longer access it from an external function. It seems to be a scoping problem that I'm struggling to resolve.

Here's an approach that works (but is not feasible for my use case):

var loader = new THREE.GLTFLoader();
    loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);

    // Changing material below
    var newMat = new THREE.TextureLoader().load(something.jpg);
    gltf.scene.traverse(function (node) {
            node.material = newMat;
    });

});

However, this approach does not work. How can I go about fixing it?

var loader = new THREE.GLTFLoader();
loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
});

function textureSwap(){
    var newMat = new THREE.TextureLoader().load(something.jpg);
    gltf.scene.traverse(function (node) {
            node.material = newMat;
    });
}

textureSwap();  // Expected material change on call

The issue encountered is 'gltf is not defined'.

javascriptthree.jsscope

Answer №1

Encountered error: 'gltf is not defined'.

This issue arises due to the fact that the variable gltf is only accessible within the onLoad() callback function. To prevent the runtime error, it is recommended to assign gltf.scene to a variable like model declared in a broader scope.

var model;

var loader = new THREE.GLTFLoader();
loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
    model = gltf.scene;
});

function textureSwap(){
    var newMat = new THREE.TextureLoader().load(something.jpg);
    model.traverse(function (node) {
        node.material = newMat;
    });
}

It is crucial to ensure that textureSwap() is only invoked after the model loading process is completed. To enhance robustness, consider the following modification:

function textureSwap(){
    if ( model ) {
        var newMat = new THREE.TextureLoader().load(something.jpg);
        model.traverse(function (node) {
            node.material = newMat;
        });
    }
}

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

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

javascriptjqueryrubyajaxruby-on-rails-3

Unable to use .ajax within autocomplete function

I've been struggling for days to make the jQuery autocomplete feature work. Currently, I am able to type in the textbox and see exactly what I want, but the issue arises when I click on the desired option - it does not show up in the textbox. I suspec ...

javascriptphpjqueryajaxautocomplete

Developing Angular dynamic components recursively can enhance the flexibility and inter

My goal is to construct a flexible component based on a Config. This component will parse the config recursively and generate the necessary components. However, an issue arises where the ngAfterViewInit() method is only being called twice. @Component({ ...

javascriptangulartypescript

What are the steps for retrieving a JSON object within an array?

var jsonData = '[{"type":"product","id":1,"label":"Size","placeholder":"Select Size","description":"","defaultValue" :{"text":"Size30","price":"20"},"choices":[{"text":"Size30","price":"20","isSelected":"true"},{"text" :"Size32","price":"22","isSelec ...

javascriptjqueryangularjsarraysjson

Using jquery and Ajax to extract data from nested JSON structures

Need help with modifying a code snippet for parsing nested JSON format [ { "name":"Barot Bellingham", "shortname":"Barot_Bellingham", "reknown":"Royal Academy of Painting and Sculpture", "bio":"Barot has just finished his final year at T ...

javascriptjqueryhtmljsonajax

Angular 6 - detecting clicks outside of a menu

Currently, I am working on implementing a click event to close my aside menu. I have already created an example using jQuery, but I want to achieve the same result without using jQuery and without direct access to the 'menu' variable. Can someon ...

javascriptjqueryangularhtmltypescript

Issue with showing multiple images on HTML page

I'm currently working on enhancing my webpage by enabling the upload of multiple images. However, I'm facing challenges in figuring out how to obtain a valid URL for the image source and to verify if the correct number of files have been uploaded ...

javascripthtml

Tips on displaying a particular JSON attribute?

After starting with a JSON string, attempting to convert it into a JSON object and then trying to print a specific field (such as firstName), I am getting undefined. What could be the issue here? Thank you for your help! var string = '{"firstName ...

javascriptnode.jsjson

Instead of using an ID in javaScript, opt for $(this) instead

Is there a way to utilize $(this) instead of an ID in the option select function in javaScript? var tot = 5 * ($( "#firstOne option:selected" ).text()); In the scenario mentioned above, I aim to substitute $(this) for #firstOne, allowing this functional ...

javascriptjquery

issue with eval() function

I am attempting to convert a JSON string from my .php file using the eval() function, but it is not working. The browser console shows a SyntaxError: expected expression, got '<'... However, when I comment out the line where eval() is used an ...

javascriptphpjqueryjson

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

javascriptangularjsangulartypescript

Error message "ag-grid: Unable to perform the key.forEach function in the console when resizing columns"

Within the application I am working on, I have implemented the ag-grid view. To address the issue related to the last empty pseudo column, I decided to resize the last displayed column using the 'autoSizeColumns' method of ag-grid. While this sol ...

javascriptvue.jsag-grid

What is the best way to invoke a function with multiple parameters in TypeScript?

I have a function that manipulates a specified query string, along with another version that always uses window.location.search. Here is the code snippet: class MyClass { public changeQuery(query: string; exclude: boolean = true; ...values: string[]): st ...

javascripttypescript

Having an issue with utilizing the useState hook in ReactJS for implementing pagination functionality

I'm struggling to resolve an issue with the React useState. What I'm trying to achieve is making an API call to fetch movies with pagination, but for some reason one of my states is showing up as undefined and it's puzzling me. The component ...

javascriptreactjsapiaxiosreact-hooks

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

javascripthtmljquerycsssplit

Leveraging Jquery and an API - restricted

I have the opportunity to utilize a search API that operates on JSON format through a URL GET. This particular API has a reputation for imposing quick bans, with an appeal process that can be lengthy. If I were to integrate this API into my website using ...

phpjavascriptajax

Receiving an error message stating "Uncaught SyntaxError: Unexpected token <" in React while utilizing the AWS SDK

Each time I execute 'npm run build' in main.js, an error keeps popping up: Uncaught SyntaxError: Unexpected token < The error vanishes after refreshing the page. Upon investigation, I discovered that two libraries are causing this problem: ...

javascriptreactjsaws-sdkaws-sdk-js

I am implementing a new method in the prototype string, but I am uncertain about its purpose

I am trying to wrap my head around the concept here. It seems like the phrase will pass a part of an array, in this case eve, to the phrase.palindrome method. This method will then process it. First, the var len takes the length of eve and subtracts 1 from ...

javascriptarraysfor-loopprototypecharat

Using observables rather than promises with async/await

I have a function that returns a promise and utilizes the async/await feature within a loop. async getFilteredGuaranteesByPermissions(): Promise<GuaranteesMetaData[]> { const result = []; for (const guarantees of this.guaranteesMetaData) { ...

javascriptangularrxjs

What could be causing my post request to function properly in POSTMAN but not in my React application?

Here are my POSTMAN headers along with the settings I used to send my POST. It only started working when I switched the Content-Type to application/json. https://i.stack.imgur.com/Xz2As.png https://i.stack.imgur.com/aJtbD.png This pertains to the server ...

javascriptnode.jsjsonpostgresqlexpress