Dealing with errors in the Loader.load() function of Three.js

I've encountered a challenge while using a JSONLoader in Three.js - specifically, I'm unsure about how to handle errors that may arise during the model loading process.

Here is an example of my code:

// create a new loader
var loader = new THREE.JSONLoader();

// load the resource
loader.load(
    // specify the resource URL
    'models/animated/monster/monster.js',
    // The callback function upon successful resource loading
    function ( geometry, materials ) {
        var material = new THREE.MultiMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    }
);

In the event that the resource is not found, the load operation fails but the callback function does not get triggered. Since it appears that there is no provision for an error callback function and using a "try catch" method won't work due to its asynchronous nature, how can I detect when this load operation fails and respond accordingly?

javascriptthree.js

Answer №1

It seems that specifying an onError callback is possible, although it may not be well-documented. Take a look at the source code for more information: https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js

Edit:

Confirmed.

https://jsfiddle.net/gwpzo5eq/

var loader = new THREE.JSONLoader();
loader.load("this load will fail", onSuccessCallback, onProgressCallback, onErrorCallback);

function onSuccessCallback(){}
function onProgressCallback(){}
function onErrorCallback(e){
    alert("Error in loading JSON! Error message: " + e.target.status + ", " + e.target.statusText);
}

The incorrect documentation has been noted. The proper .load function signature should be as follows:

JSONLoader.load( url, onLoad, onProgress, onError )

An issue has been raised on the THREE.js github page regarding this matter.

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

Creating an AJAX data form in a JSP scenario

I want to correctly set up the data parameter for the ajax call. <script type="text/javascript"> $(document).ready(function() { $('#call').click(function () { $.ajax({ type: "post", ...

javascriptajax

The key you entered in local storage was not defined and the value associated with

Having an issue with my HTML signup form where the key is showing as undefined (email should be the key) and the value displays as [object Object]. Any help in resolving this problem would be greatly appreciated. Thank you. <!DOCTYPE html> <html& ...

javascriptarraysjsonlocal-storage

Tips for handling errors when the ID parameter in the URL doesn't correspond to the ID in the database and redirecting to an error page

Utilizing a MERN stack application, I rely on the Axios library to facilitate communication between the client and server. An essential route '/blogs' is responsible for fetching all the blogs from the backend and presenting them on the interface ...

javascriptnode.jsreactjsmongodbmern

Is it unwise to rely on Sequelize for validating objects that are not stored in a database?

Currently, I am utilizing Sequelize as my ORM and find the powerful built-in model validation to be quite impressive. I am contemplating leveraging Sequelize as a schema validator in specific scenarios where there would not be any actual database writes. E ...

javascriptnode.jsexpressormsequelize.js

Executing Ajax requests with callbacks in JavaScript/jQuery

I'm facing an issue where my functions are executing before Ajax requests (first fetching local JSON, then retrieving data from an online resource) have completed. For example, I want countTheMovies to run only after all the necessary information is ...

javascriptjqueryajax

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

javascriptjquerycss

Dealing with Unreliable Data in Scatter Plots using React and HighCharts

Initially, I utilized line charts for my data visualization needs. However, I now require multiple data points on the same X-Axis with tooltips, which has led me to discover HighCharts behavior: "In a line chart, by default, Highcharts will display t ...

javascriptreactjshighchartsreact-functional-componentreact-highcharts

What is the best way to execute a separate function once another function has finished executing?

I've spent quite some time coding out a lengthy process, but I'm now trying to simplify it using this concise piece of code. My goal is to trigger function B() once function A() has finished executing. I attempted to achieve this with a callback ...

javascriptnode.jscallback

What could be causing the TypeError in my pg-query result?

In the process of creating a node function to add a user to a PostgreSQL database, I am utilizing node.js, pg, and pg-query for communication between the application and the database. Prior to inserting a new record, I am attempting to verify that the ema ...

javascriptnode.jspostgresqlpg-query

Ways to integrate a component within a custom component in the React framework

I am looking to dynamically change the body content, how can I achieve this? import React from 'react' // import { Link } from 'react-router-dom' export default function ProjectTemplate(props) { const Css= { "--backgr ...

javascriptreactjsjsx

`Monitoring and adjusting page view during window resizing in a dynamic website`

Situation: Imagine we are reading content on a responsive page and decide to resize the browser window. As the window narrows, the content above extends down, making the entire page longer. This results in whatever content we were previously viewing bein ...

javascriptresponsive-designscroll

In JavaScript, generate a new column when the text exceeds the height of a div

Is it possible to create a multicolumn layout in HTML that flows from left to right, rather than top to bottom? I am looking to define the height and width of each text column div, so that when the text overflows the box, a new column is automatically ge ...

javascripthtml

Display the icon exclusively when hovered over

I have a table with a column containing icons that I want to hide by default. I would like the icons to only appear when hovered over. Here is the HTML code: <table class="table table-hover"> <tr> <th>From</th> <th> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to maintain line breaks when using ".text" or ".textContent"? Any other options or solutions available? Workarounds to consider?

When trying to copy HTML from one element and paste it as text in another element, I noticed that newlines are not retained in the latest versions of Firefox and Chromium. For instance, if you run the code below (with valid HTML), the output will have the ...

javascriptjqueryhtml

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

I am looking to create a grid on the screen of a web browser or mobile device, with each grid item containing just one letter. It's similar to a crossword puzzle, but taking up most of the screen. I've tried using divs for this purpose, but it se ...

javascripthtmlcssweb

Is incrementing x by 1 equivalent to x + 1?

I have a very basic angular application. It simply increases the value by 1 when clicked on using ng-click. Take a look at JSFiddle <div ng-app="app" ng-controller="ctrl"> <div ng-click="hello=hello+1">THIS WORKS ON CLICK: {{hello}}</d ...

javascriptangularjsangularjs-ng-click

Basic Block - Three.JS

My goal was to create a simple rotating 3D cube using the Three.js library for WebGL. Despite following numerous tutorials, I can't figure out why my code only displays a black screen with no geometry. //Setting window dimensions var width = windo ...

javascript3dthree.js

Validate callback props in React using PropTypes and ESlint error handling: A guide

I stumbled upon this Route snippet on the official documentation for react-router: <Route path="/:url*" exact strict render={props => <Redirect to={`${props.location.pathname}/`} />} /> The purpose of this code is to automa ...

javascriptreactjseslintreact-proptypes

Incorporating an image within a v-for loop in Vuetify

I am planning to incorporate images at a later stage, but I am currently utilizing v-for and facing a dilemma of how to seamlessly introduce the image within the loop without disrupting its flow. <template> <v-card> <p v-for="item ...

javascriptvue.jsvuetify.js

Tips for setting a state as the height for a div in React

I've been involved in a project that involves user input for the height and width of a div to be displayed with specific dimensions. Although the state is successfully being updated, the height of the div remains unchanged. import { useState } from & ...

javascriptreactjsreact-hooks