What is the best way to upload multiple textures using the latest THREE.TextureLoader?

Can anyone advise on how to efficiently load multiple textures using the new THREE.TextureLoader from Three.js?

Currently, I am loading my textures individually as shown below:

  var texture1 = THREE.ImageUtils.loadTexture('texture1.jpg');
  var texture2 = THREE.ImageUtils.loadTexture('texture2.jpg');
  var texture3 = THREE.ImageUtils.loadTexture('texture3.jpg');
  var texture4 = THREE.ImageUtils.loadTexture('texture4.jpg');
  var texture5 = THREE.ImageUtils.loadTexture('texture5.jpg');
  ...

However, Chrome's developer tools display the warning message:

THREE.ImageUtils.loadTexture is being deprecated. Use THREE.TextureLoader() instead.

I have attempted to use the new THREE.TextureLoader: 

var loader = new THREE.TextureLoader();

loader.load('texture1.jpg',function ( texture1 ) {});
loader.load('texture2.jpg',function ( texture2 ) {});
loader.load('texture3.jpg',function ( texture3 ) {});
loader.load('texture4.jpg',function ( texture4 ) {});
loader.load('texture5.jpg',function ( texture5 ) {});

Could someone point out if there is an error in my approach?

More information about TextureLoader

javascriptthree.js

Answer №2

To effectively load all textures asynchronously, you can utilize promises in the following manner:

const loader = new THREE.TextureLoader();
const texturePromises = [loader.load('texture1.jpg'), loader.load('texture2.jpg')];
Promise.all(texturePromises)
    .then(textures => {
        // textures are now loaded and available in an array
    })
    .catch(error => {
        console.error('Error loading textures:', error);
    });

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

Retrieve the quantity of files in a specific directory by implementing AJAX within a chrome extension

I need assistance with obtaining the count of images in a specific directory using JS and AJAX within my chrome extension. My current code is included below, but it does not seem to be functioning as expected since the alert is not displaying. main.js .. ...

javascriptjqueryajaxgoogle-chromegoogle-chrome-extension

Dealing with JSON data retrieved from a Django QuerySet using AJAX

I am utilizing a Django QuerySet as a JSON response within a Django view. def loadSelectedTemplate(request): if request.is_ajax and request.method == "GET": templateID = request.GET.get("templateID", None) ...

javascriptjsondjangoajax

After an Ajax request, the functionality of Javascript/Jquery ceases to work

After successfully submitting a form via ajax for the first time, the subsequent submissions seem to break all javascript functionality on the page. Additionally, the form is unable to submit with ajax again. Below is the code snippet for the ajax call: ...

javascriptjqueryajax

Using ES6 template strings to access MongoDB object keys

I am attempting to modify an array within my collection using the following method: var str = "list.0.arr"; db.collection('connect').update({_id: id}, {$push: { `${str}`: item}}); While the above code works perfectly fine, it throws an er ...

javascriptmongodbecmascript-6

Get started with the free plan for sails.js on Paas

Looking to test out my sails.js application deployment options. Can't seem to find sails.js on the supported list for Heroku and OpenShift's node.js offerings. Are there any free Platform as a Service (PaaS) plans available for sails.js? ...

javascriptnode.jssails.jspaas

External JavaScript functions remain hidden from the HTML page

Having issues with JavaScript functions. I created functions in a separate file named index.js, but when I use them in index.html like "onclick = function()", the file doesn't recognize the function. <!doctype html> <html lang="{{ app()-> ...

javascripthtmlfunctionreference

press a cURL PHP ajax button to trigger an action

Hello everyone, I could really use some help here. I've been looking at similar questions but none of the answers seem to apply to my situation. I extracted a page using curl, however, there's a button on that page that I am unable to interact w ...

javascriptphpajaxcurl

Issue: ENOENT - The specified file or directory cannot be found while scanning in a discord bot

Recently, I decided to try my hand at creating discord bots even though I am new to it. After watching a tutorial and copying the code, I encountered an error that has me stumped: node:internal/fs/utils:347 throw err; ^ Error: ENOENT: no such ...

javascriptnode.jsdiscord.js

"Narrow down the object's properties based on an array of specified property

So here's the situation: I have an object that looks like this var obj = { name1: somevalue1, name2: somevalue2, name3: somevalue3} Followed by an array var arr = [name2, name3] Both of these are dynamically generated. What I need to do is filte ...

javascriptangularjsunderscore.js

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

The functionality of express routes is flawless when running on a local server, but encounters issues

I'm currently in the process of developing a blog using Node.js and Express, with plans to host it on Firebase. Everything seems to be running smoothly when I serve the website locally as expected, but once I deploy the server, the routes stop functio ...

javascriptnode.jsfirebaseexpressgoogle-cloud-functions

Expanding the use of tagged template literals for passing additional arguments

Currently, I am utilizing styled-components and creating components through their tagged template literal syntax like this: const Button = styled.button` background-color: papayawhip; border-radius: 3px; color: palevioletred; ` In a specific scenar ...

javascriptreactjsecmascript-6styled-components

Inverting the order of vertices in a THREE.js face

I am seeking a way to reverse the order of vertices in faces within my geometry. For instance: // create geometry var geometry = new THREE.Geometry(); // create vertices geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) ); geometry.vertices.push( ...

javascriptthree.js

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

Here's an example of how I'm initializing a property: this.currentMapObject$ = zip(this.mapObjects$, this.currentMapObjectsIndex$, (mapObjects, index) => mapObjects[index]); I want the value of this.currentMapObject$ to be emitted only ...

javascriptangulartypescriptrxjsngrx

Error: Conditional formatting not compatible with JavaScript detected

I have a jQuery DataTable that is populated with data from a JSON file. Everything works smoothly, but I'm encountering an issue with conditional formatting. The script I'm using assigns a 'positive' class to all cells in column 2, even ...

javascriptjqueryjsondatatables

Tips for choosing or unselecting all checkboxes in an oracle apex form

https://i.sstatic.net/TCAB0.png I'm currently working on a page region in Oracle Apex which features multiple checkboxes (apex form). I'm looking to implement a feature where a checkbox is added at the top of each group of checkboxes, allowing us ...

javascriptjqueryoracleoracle-apex-19.1

Trouble with sending data to child components via props

I've been trying to pass a prop to a child component in React, but when I check the props using console log, it doesn't show up at all. Even the key things is missing from the props. Any assistance with this would be greatly appreciated. export ...

javascriptreactjsroutesreact-reduxreact-router

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Can anyone explain why the preset is generating CSS in the output file, but the styles are not displaying in the browser? When I manually write CSS in newstyle.css, it gets outputted to output.css and renders correctly in the browser. I attempted adding t ...

javascripthtmlcsstailwind-csspreset

Is there a way in React to specify which properties to pass (and when to pass them) to child components based on the properties of the parent component?

In this hypothetical scenario, there are 4 components already in place: MainComponent1, MainComponent2, IntermediateComponent, and ChildComponent. Both MainComponent1 and MainComponent2 can utilize IntermediateComponent as their child component, while Chil ...

javascriptreactjsfrontendreact-propsweb-frontend

Visualizing JSON data on D3.js graph axis

Below is a snippet of JSON data that I successfully plotted on a d3js graph, using it as the x and y axis: var data = [ { "count": "202", "year": "1590" }, { "count": "215", "year": "1592" }, { "count": "179", "year": "1593" } ]; Now, I am facing a chal ...

javascriptjsongraphd3.js