What is the best way to handle texture loading delays in Three.js when using a JSON model?

Currently, I have successfully loaded a JSON model based on AlteredQualia's skinning example. However, I am looking to hide the model until it is fully loaded. In the provided example, the models are displayed before their texture resources finish loading:

To address this issue, I placed an opaque div on my webpage and attempted to move it out of the way using the callback function of JSONLoader.load(). Unfortunately, the callback is activated when the mesh is added to the scene, even if the skinning images are still loading, resulting in an incomplete scene becoming visible.

Does anyone have suggestions for resolving this issue? I looked into THREE.ImageUtils.loadTexture() which has a callback function, but it doesn't seem to be applicable in this scenario where the mesh is defined as follows:

var mesh = new THREE.SkinnedMesh(geometry,new THREE.MeshFaceMaterial(materials));
//geometry and materials are parameters of JSONLoader.load callback

I examined the source code of MeshFaceMaterial and SkinnedMesh but couldn't find a solution there.

Your help is greatly appreciated!

Answer №1

Currently, the organization of this is a bit disorganized. Unfortunately, there hasn't been any callback or event triggered once all elements have finished loading.

Answer №2

In the depths of three.js at line 10362 (revision 61), there lies a clever workaround. When you encounter image.onload = function() in the main THREE.Loader prototype, know that it is the callback function for loaded textures from JSON models.

If you dare to insert your own callback within that function, you can monitor the progress of texture loading.

However, let me reiterate, this method is a mere workaround (although it did wonders for a specific project) and not a definitive solution. Proceed with caution when tinkering with the library code. You may end up breaking things unknowingly.

Answer №3

Although it may seem like a silly and unconventional approach, this cheat can actually be quite effective as a workaround. It's important to understand the loading of images separately to prevent unnecessary delays for other tasks. However, if your main concern is not optimization...

var texture = THREE.ImageUtils.loadTexture(url); 
while (texture.image.width == 0);

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

How to include THREE.js in a Node module along with custom variables and functions

I have been working on adapting a THREE.js project that originally included JavaScript files directly in HTML into a node module-based setup. My goal is to utilize webpack to bundle the project into a single file (bundle.js) so that the HTML only needs to ...

Adding nested JSON data to MySQL using NodeJS

My current challenge involves using Node.js to INSERT JSON data into a MySQL database. Everything runs smoothly until I encounter nested values within the JSON structure. Here is an example snippet of my JSON data: var result2 = [{ "id": 89304, "employe ...

Utilize jQueryUI sortable to serialize a list item within an unordered list

I'm looking to learn how to generate a JSON or serialize from a ul element with nested list items. Here's an example: <ul class="menu send ui-sortable"> <li id="pageid_1" class="ui-sortable-handle">Inscription <ul class="menu ...

Using Json.Net, Object[] can be defined with strong typing

I have encountered an issue that has been bothering me for quite some time. I rely on JSON.Net for serializing and deserializing objects. I use a specific code snippet to call methods based on their parameter types. When I execute the given code, it outpu ...

Transform basic list into a two-dimensional array (grid)

Picture a scenario where we have an array: A = Array(1, 2, 3, 4, 5, 6, 7, 8, 9); We aim to transform it into a 2-dimensional array (a matrix of N x M), similar to this representation: A = Array(Array(1, 2, 3), Array(4, 5, 6), Array(7, 8, 9)); It's ...

Designing unique variations using Material UI

I am currently exploring the creation of custom variants for the Button component in Material UI. To start off, I am developing a customized component based on the Button component with specific styles: // CTA.js import { makeStyles } from "@materia ...

How to send a JSONArray with just a single string using retrofit

As I attempt to send a server request, the expected body for this request is ["1"] However, sending a string as "[\"1\"]" results in an error Upon inspecting the body, it is evident that I need to send a JSONArray. I attempted to achieve this u ...

The functionality of AngularJS's state URL depends on numerical URLs for navigation

Currently, I am utilizing the following URL in my state setup: .state('forum.spesific', { url: '/:articleId', templateUrl: 'modules/forum/client/views/forum.client.view.html', controller: 'forumCont ...

I am currently studying react.js and struggling to comprehend how the deployment process for a react app functions

Will the server only serve the index.html file or is there a way for the client to run that html file as it's not a regular html file? Do I need a backend node to make it work? I'm having trouble understanding the entire process. Normally, a cli ...

Shifting attention from one input to another by utilizing a barcode scanner

Utilizing a barcode scanner, I am inputting data into the fields of a webpage. The form is set up with autofocus on the initial input field. However, upon entering the first barcode in the opening field, the focus should shift to the following input field. ...

Retrieving information from embedded JavaScript code

The web page I am scraping contains inline JavaScript that dynamically generates telephone numbers inside a script tag. These numbers are not visible in the page source, making it challenging to scrape using common methods like x-path and beautiful soup. U ...

How come JavaScript variables are able to persist on JQuery Mobile multi-page templates on desktop browsers, but not on mobile browsers?

My website was created using the jQuery Mobile multi-page template. While testing it on Chrome desktop, I noticed that my JavaScript variables (comics and checkedItems) retain their values when navigating between pages. However, on mobile devices, these ar ...

Preventing Background Scrolling While Modal is Open in React - Using 'position: fixed' causes the page to unexpectedly scroll back to the top

Currently working on a React website where users can scroll through various posts on the homepage. Each post includes a '...' menu that, when clicked, opens up a modal with additional options. In order to prevent the background from scrolling w ...

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?

I am currently working on creating a wind map that displays data from seven different weather stations. My goal is to develop a fluid and interactive map similar to the ones found in this animation or this animation. In my research, I came across an artic ...

Exploring ways to integrate Javascript and CSS into a Bootstrap lightbox modal dialog?

Can someone help me figure out how to use the bootstrap lightbox to display a form with specific CSS style and JavaScript code for the form? I'm having some trouble implementing it. I specifically need this setup because I am using Selectize.JS to cr ...

Utilizing Angular 5: Enhancing ngFor with a Pipe and a Click Event

Iterating through an array of objects using *ngFor, I apply various filters via pipes to manipulate the resulting list. One of these pipes relies on a user input from a search field. Upon clicking on one of the ngFor elements, the corresponding object is p ...

Node: Sending JSON Values in a POST Request

I am currently working with the index.js file below: var Lob = require('lob')('test_6afa806011ecd05b39535093f7e57757695'); var residence = require('./addresses.json'); console.log(residence.residence.length); for (i = 0; i ...

Issue with toggling JS checkboxes selection

Seeking assistance in expanding my knowledge of Javascript. I have a form with checkboxes and a JavaScript function that allows toggling between selecting and deselecting all the boxes. Everything is functioning as intended so far. The challenge arises f ...

Is it possible to upload a file using Angular and ASP.NET Web API Core?

I am encountering an issue with CORS policy while making requests. It works fine when the content-type is set to 'application/json'. However, when I try to upload a file using content-type 'multipart/form-data', I receive an error: XML ...

Vim: Turn off autocomplete when using insert mode key bindings

I've set up a mapping in insert mode to automatically indent brackets: inoremap [;<CR> [<CR>];<Esc>O<Tab> When I use it, the result looks like this (the pipe character represents the cursor): const a = [ | ]; Now, I want ...