Having trouble with JavaScript syntax or encountering issues while utilizing THREE.ImageLoader in a loop in three.js?

It seems like more of a JavaScript syntax issue than a Three.js problem, but I'm stuck. I have an object called "o = {}", with textures stored in this format:

o = {
    ...
    textures: {
        one: {  
            low: { t: new THREE.Texture(), url: 'http://i.imgur.com/tJ0uJPt.jpg' },
            normal: { t: new THREE.Texture(), url: 'http://i.imgur.com/wBB1nZN.jpg' }
        },
        two: {  
            low: { t: new THREE.Texture(), url: 'http://i.imgur.com/9JaoZNA.jpg' },
            normal: { t: new THREE.Texture(), url: 'http://i.imgur.com/p9wO18t.jpg' },
            hd: ...,
            etc..
        }

        etc..
    }
    ...
}

I need a function to load all these textures using THREE.ImageLoader. Additionally, once all the textures are loaded, I want to run the o.texturesOnLoad(); function.

This is what I have so far http://jsfiddle.net/NEXny/5/, but only the last texture in o.textures is working. I think I might be passing variables incorrectly to loader.load( ... );

I hope someone can assist me, thank you.

javascriptthree.js

Answer №1

After some investigation, I managed to find a solution by enclosing loader.load(...) within a self-executing function.

(function(obj, texture) {
    if (current == total) {
        // last texture
        loader.load( texture.url, function (image){
            texture.t.image = image;
            texture.t.needsUpdate = true;

            obj.texturesOnLoad();
        });
    } else {
        loader.load( texture.url, function (image){
            texture.t.image = image;
            texture.t.needsUpdate = true;
        });
    }
})(this, this.textures[texture][quality]);

http://jsfiddle.net/NEXny/6/

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

Vue.js produces excessive white spaces in the generated HTML

I am struggling with a problem regarding the rendering of strings using Vue. At the moment, if an HTML tag is opened and closed on different lines like this: <span class="description"> {{ text }} </span> it ends up being displaye ...

javascriptvue.js

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

Issue: EMFILE - exceeding maximum number of opened files

I'm currently working with nw.js, attempting to save images in an array of img tags with random names. However, I've encountered a few errors and I'm unsure what's causing them. for (i = 0; i < imgs.length; i++) { request(imgs[i].g ...

javascriptnode.jsrequestnpm

Tips for creating a loop that maintains the integrity of the data

I am facing a challenge with an exercise block containing a word of 4 syllables. This is how it appears in my JSON data: { "main_object": { "id": "new", "getExerciseTitle": "TestFrontEnd", "language": "nl_NL", "application": "lettergrepen", "main_object" ...

javascriptjquery

Combine the values of identical keys from multiple objects in an array by utilizing the forEach method in JavaScript

I am currently working on refining a shopping basket function with Vue JS. One of the key features I need to implement is a subtotal calculation that multiplies the price and quantity values for each item and then combines them to create an overall subtota ...

javascriptarraysobjectforeachvue.js

Animating the display and concealment of a Ui Bootstrap alert within an AngularJS modal window

Trying to create a dynamic animation for an ng-hide feature used on a Ui Bootstrap alert button within a Ui Bootstrap Modal is proving to be quite challenging. The goal is to have the alert slide in and out while simultaneously fading in and out. Although ...

javascriptcssangularjsangular-ui-bootstrap

Uploading Images Dynamically with Ajax and jQuery in PHP

[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...

javascriptphpjqueryhtmlajax

Transform the Asp.net JavaScript jsgantt-improved Gantt chart to be compatible with Blazor

Struggling to implement a Gantt chart in Blazor with razor pages after finding a nice one for Asp.net. Any tips on how to proceed? I've already added jsgantt.js and jsgantt.css to wwwroot and included references in index.html. But now, how do I go a ...

javascriptc#htmlasp.netblazor

Authentication with PassportJS using Google OAuth2 strategy

When using the PassportJS Google OAuth Strategy, I encountered an issue where the user id I serialize and send to the cookie for the browser does not return when attempting to deserialize it. This becomes evident when I use console.log on the user, which r ...

javascriptnode.jsexpresspassport.jscookie-session

Struggling to generate fresh vue components

Having trouble registering new components in my Vue app. I have successfully registered some components, but when I try to register a new one, I encounter the error: Unknown custom element: <store> - did you register the component correctly? For re ...

javascriptvue.jsvuejs2vue-component

Encountered a JSON error while implementing in an ASP project

Currently, I am working with JavaScript and C# in aspnet. My goal is to pass 3 values from the Asp Page to the code behind, using the Json method. Below is how I achieve this: //initialize x, y and nome var requestParameter = { 'xx': x, 'yy ...

c#javascriptasp.netjsonpost

I am encountering an issue where the useState hook is returning an undefined value on separate components, even after

When setting up a login context, I wrap all my routes with the context provider and pass the initial value using useState: <userContext.Provider value={{loggedUser, setLoggedUser}}> In LogInMenu.jsx, which is responsible for setting the loggedUser ( ...

javascriptreactjsreact-hooksreact-context

What is the process by which Elastic Beanstalk executes Node.js application code?

While my application runs smoothly on localhost, encountering no issues, deploying it to other platforms such as AWS or MCS presents a challenge. Specifically, the problem lies in recognizing the file paths required by the consign library to load the route ...

javascriptnode.jsamazon-web-servicesexpressamazon-elastic-beanstalk

Why am I only getting the final value in a loop when using Three.js Loader callbacks?

Seeking assistance with loading models in a loop where each model should have a different material assigned. However, all models end up with the same material, possibly due to the variable "i" being at its final value when the create mesh function is calle ...

three.js

Automating testing with WebdriverIO in scenarios where JavaScript is turned off

Is it possible to launch the browser with JavaScript disabled in the WebdriverIO framework? I am looking to automate a scenario that requires JavaScript to be disabled. However, when I try to disable JavaScript manually in Chrome or Firefox and run WDIO s ...

javascriptselenium-webdriverwebdriver-iobrowser-automationwdio-v4

I'm having trouble retrieving data from the server using the AngularJS $http.get() function. What am I doing wrong

Ensure that your question is clear and that your code properly showcases the issue at hand. Feel free to leave any questions or comments below for clarification. app.js var express = require('express'); var app = express(); app.use(express.sta ...

javascriptangularjsnode.jsexpressget

Modifying the anchor link in a pop-up window according to the clicked link using JQuery

I'm currently working on enhancing a forum where we aim to alert users when they click on links that will redirect them to an external website. Right now, my code successfully opens a pop-up window and directs the user to the intended link. However, ...

javascriptjqueryanchoreach

What is the best way to attach a CSS class using an onclick function?

I need to dynamically apply a CSS class to a specific div when clicked using JavaScript. Here is the HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu ...

javascripthtmlcss

Implement an event listener on an element dynamically inserted into the DOM through an AJAX request

My issue involves a set of checkboxes being dynamically added to a document using an Ajax call. <input type='checkbox' checked class='import'> <input type='checkbox' checked class='import'> <input typ ...

javascriptajaxdomprototypejsdom-events

Challenges with differentiating between addition and concatenation in Vue computed properties

Recently diving into Vue and came across an intriguing issue, I am curious to know the reason behind it and how to prevent it. <template> <div> <input type="number" v-model="a" style="color: white" /> <input type="number" v- ...

javascriptvue.jsvuejs2vue-componentcomputed-properties