Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53.

While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback function allows the texture to be displayed as intended:

// The following code does not work when adding a callback

var material = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('text_build.png', {}, function()
            {
 //do something
            })
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );

// However, without the callback, the following code works perfectly fine

var material = new THREE.MeshBasicMaterial({
             map: THREE.ImageUtils.loadTexture('text_build.png')
});
var plane = new THREE.Mesh(new THREE.PlaneGeometry(135, 135), material);
plane .overdraw = true;
scene.add(plane );

Interestingly, when executing this same code in WebGL Renderer (on FF, Chrome on Win7), both examples work seamlessly.

If anyone could kindly point out any mistakes that I may have overlooked, it would be greatly appreciated.

Thank you very much.

Answer №1

Consider giving this a shot:

let textureMaterial = new THREE.MeshBasicMaterial({    
    map: THREE.ImageUtils.loadTexture( 'text_build.png', new THREE.UVMapping(), function() { ... } )
});

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

Error in Angular2: "Promise" name not found despite successful installation of global dependencies

I'm currently developing an application using Angular 2 and Node.js. I've already installed all the necessary dependencies specified in package.json. Inside this file, there is a postinstall command that should install the required dependencies m ...

Listening for events on an array of elements using jQuery

My task involves populating an array with elements using the .each() method and the $(this) selector. (function($){ var elements = new Array(); var index = 0; $("img").each(function() { if($(this).attr("attribute")){ $(thi ...

I'm curious about utilizing jsviews in conjunction with jquery sortable

Check out my jsFiddle Example where I am using jsViews in conjunction with JQuery sortable. By default, the remove function works fine; however, when you change the order of items and then try to delete one, multiple items are removed. How can this issue ...

Troubles encountered while processing STL file readers

Utilizing STLLoader.js, I am able to render components successfully, however, they all appear with one uniform color which does not resemble real-world components. The image above showcases my implementation in Three.js using STLLoader.js (Binary STL file ...

Ways to dynamically refresh a Vue component when data is updated without the need to manually reload the

After fetching data using axios, I noticed that my Vue component doesn't update automatically after a click event or when the data changes. As a workaround, I have to refresh the page to see the updated data. Is there a simple solution to this issue? ...

Is it more beneficial to categorize REST-based modules/controllers by resource or by specific action/feature?

I'm facing a scenario that goes like this: Endpoint 1: Retrieve all books in the United States owned by John with a GET Request to /country/us/person/john/books Endpoint 2: Get all books owned by John in every country with a GET Request to /person/j ...

How can I include additional view folders for Jade files in my EXPRESS application?

So, I understand that by using app.set('views', path.join(__dirname, 'views')); in Express, the view variable is set to render all .jade files in the ./views folder. However, I'm wondering if there's a way to add additional p ...

HTTP request in Angular with specific body content and custom headers

My goal is to access the sample API request from , as demonstrated in the documentation: curl -H "api-key: 123ABC" \ -H "Content-Type: application/json" \ -X POST \ ...

Filling form fields with data from a dynamically created table using jQuery

I am facing an issue with populating the fields in the input box of my modal. The modal appears after clicking the Edit button in a table, and it should populate the fields based on the table row where the button is clicked. The table is generated using jQ ...

Ways to create a table with columns from various fields obtained through an API call

Looking to preprocess data received from an API, the raw data is structured as follows: Desiring to dynamically generate a table with columns based on the fields task_name and saved_answers. It's important to note that saved_answers might contain var ...

The autocomplete feature in Atom is not functioning as expected

Autocomplete+ is included with the installation of Atom and is activated by default. I have noticed that when I am coding, no suggestions are appearing. What could be causing this issue? Do I need to adjust any files in order for Autocomplete+ to functio ...

Is it possible to modify CSS properties by clicking on buttons?

Hello, I really need help with this task. I want to change the style of a button (which is actually a link) by clicking on it. These buttons are housed within a dynamic child div that changes each time, but the name of the dynamic child div remains con ...

Is there a way to utilize regular expressions in React to dynamically insert onclick events into specific words within a text block?

I've been experimenting with regular expressions in React to implement an onclick event for each word in a text. I've attempted two different strategies, but neither has been successful thus far. Initially, I tried: return( <div> & ...

Guide to building a straightforward line graph using JSON data from a server

When I retrieve price change data from an API endpoint using axios, the response I receive is in the following format: 0: (2) [1639382650242, 48759.49757943229] 1: (2) [1639386250855, 49131.24712464529] 2: (2) [1639389730718, 48952.65930253478] 3: (2) [163 ...

"Successful implementation of Ajax function in local environment but encountering issues when running online

I am facing an issue with my AJAX function. It works perfectly fine on my local server but does not return anything when I move it to my online server. Below is the code snippet: This is the part of the page where I call the showEspece() function: echo ...

Adjust Tinymce size automatically when a key is held down for a prolonged period of

Having trouble with tinymce not automatically resizing when certain characters are pressed repeatedly. However, the height adjusts after releasing the key. Is there a method to auto resize tinymce during the key down event? I am utilizing angularjs ui-tin ...

Tips for modifying JSON property names during the parsing process

As outlined in the JSON.parse documentation, a reviver function can be utilized to modify the value of each property within the JSON data. Here is an example: JSON.parse('{"FirstNum": 1, "SecondNum": 2, "ThirdNum": 3}', function(k, v) { return ...

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...

Successful Ajax request made within a loop to update a global variable

I am trying to set a global variable from a function and loop through AJAX calls to get the distance. However, I'm facing an issue where the nearestIndex variable always ends up being undefined. The first solution I came across was to use async: fals ...

Stable header that jumps to the top when scrolled

I have implemented the JavaScript code below to set the header to a fixed position when it reaches the top of the page so that it remains visible while the user scrolls. Everything appears to be functional, but the header movement is abrupt and not smooth. ...