Tracking the progress of texture loading in Three.js

Facing an issue with creating a loading message while loading a texture for a scene. The onProgress console.log message is only triggered once the texture has finished downloading and not during the process.

manager = new THREE.LoadingManager();

manager.onProgress = function () {
    console.log('loading');
};
manager.onLoad = function () {
    console.log('loaded');
};
manager.onError = function () {
    console.log('there has been an error');
};

var textureLoader = new THREE.TextureLoader( manager );
var planetTexture = textureLoader.load('/assets/images/planet/{{page.planet}}/{{page.planet}}.jpg');

Tried looking through examples but couldn't understand how it's done in this obj loader example

Answer №1

The onLoad function is triggered once for each item in the loader manager. If you load a single texture, it will be called once. Check out an example of this behavior in this demo.

To utilize the callback, simply pass it as the second argument when invoking the load method:

loader.load(
    url,
    onLoad
);

This setup allows you to track progress not at the individual image level, but rather when loading multiple textures using the same loader manager.

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

Cannon.js combines with Three.js for a sleek car simulation with realistic physics

Currently, I am experimenting with the creation of a simplistic car utilizing physics in Three.js and Cannon.js. My progress so far includes developing the visual and physics aspects of the car along with its wheels. The car can respond to commands involvi ...

"The jQuery colorpicker function is not functioning properly when applied to newly added elements

I've got these amazing gadgets with a cool sliding box feature inside. Initially, there are two widgets visible on the page, but you have the option to add or delete a widget as needed. Within the sliding box, there is a color picker tool. Interestin ...

Tips for preventing multiple button clicks until the completion of the initial click event

I created a clock that tells the time every quarter as per the professor's request. However, there is an issue - when I click multiple times, the clock keeps telling the time repeatedly until the number of tellings matches the number of clicks. I thou ...

Is adding ng-click in a template counterproductive to the concept of MV* architecture?

When working with AngularJS, you may come across instances where the ng-click handler is directly connected to an HTML element like <a> or <button>. Take for example the snippet below (borrowed from an Angular homepage sample), where the click ...

Using Javascript or Typescript constants along with WebPack being invoked twice

I am encountering an issue with my constants file: collections.ts import {Mongo} from 'meteor/mongo'; import {Chat, Message} from 'api/models'; export const Chats = new Mongo.Collection<Chat>('chats'); export const Me ...

The concept of transparency in Internet Explorer 8 stands out in

Has anyone been able to achieve transparency in IE8 for the foreground color, not just the background color? I've tried various solutions but they all seem to focus on the background color. I need the transparency effect for user-generated colors, so ...

guide on creating a simple line highchart using JSON data

Here is the JSON data I have: {"09/02/2014 15:36:25":[33.82,33.42,40.83],"08/11/2014 16:25:15":[36.6,33.42,40.45],"07/30/2014 08:43:57":[0.0,0.0,0.0],"08/12/2014 22:00:52":[77.99,74.1,80.12],"08/12/2014 21:19:48":[56.91,63.23,52.42],"07/23/2014 13:37:46": ...

Using DraftJS to swap text while preserving formatting

Currently, I am implementing Draftjs with draft-js-plugins-editor and utilizing two plugins: draft-js-mathjax-plugin and draft-js-mention-plugin My goal is to replace all mentions with their corresponding values when the user uses '@' to mention ...

Creating a dynamic workspace with a portable viewing window

I am looking to create a spacious workspace for arranging objects, but I also want to incorporate a customizable "viewport" that will display a specific area of the workspace for the user. This viewport should be resizable and movable within the workspace, ...

Using Golang to encode JSON for parsing in JavaScript

I am working with a struct that looks like this: type User struct { Login string `json:",string"` PasswordNonce Nonce `json:",string"` PasswordHash HashValue `json:",string"` CreatedOn time.Time `json:",string"` Email ...

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

Axios failing to transmit cookie information, despite setting withCredentials to true

Exploring the capabilities of React and Express to handle requests while including cookies. The communication between client-side and server-side is successful, however, the cookies are not being transmitted. On the client-side: import axios from 'axi ...

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Trying to understand how async functions and the Joi.validate() function behave. Below is a function used for validating user input. const Joi = require("joi"); const inputJoiSchema= Joi.object().keys({ name: Joi.string(), email: Joi.string().require ...

Even though the bones are in motion, the rigged mesh still remains rigid and fails to animate

I have a model with a skeleton that has been properly set up. After adding the animations and Animation Helper to visualize the model's movement, I encountered a strange issue. The bones are moving according to the animation helper rendering, but the ...

Display chart labels are constantly visible in Vue Chart JS

In my Vue.js JavaScript application, I am working on setting up a chart where I want the labels and chart information to be visible at all times without requiring mouse hover. Check out this image of the chart. This is the code snippet for my chart: < ...

What is the method of including a null option in a dropdown menu?

I have a basic dropdown menu with the placeholder text "none." I want users to be able to clear their selection without adding another option to the dropdown. Can anyone help me achieve this? Thank you! Below is my code snippet: Check out the live demo h ...

Exploring the World of jQuery Caching and Navigating Through Objects

I'm interested in learning more about jQuery caching and how it can enhance performance. Can you explain how to properly utilize this technique? From what I understand, when using a jQuery selector, you're essentially searching the DOM to create ...

Tips for creating a personalized event handling strategy in JavaScript

I find myself in the midst of designing and developing a web store, trying to figure out the best approach to handling the loading of a substantial amount of product items. It seems that although AJAX is asynchronous, it doesn't necessarily mean paral ...

The 'userEvent.type' function in React Testing Library is failing to update the input value in a Material UI TextField component that has

I am currently facing an issue with a material UI TextField element that is meant to track the latitude value. The requirement is for the latitude to fall within the range of -90 to 90 degrees. I have implemented a unit test as a validation measure, howeve ...

Having trouble with Nodemon not automatically refreshing the browser in a React-Express-Node application?

I recently set up nodemon locally in my workspace to automatically restart after making changes, but I noticed that it doesn't refresh the browser page. I have to manually refresh it every time. My workspace includes Express, Node, React, and Webpack ...