Three.js is struggling to load materials due to a property reading error (Attempting to access length of an undefined property)

As I dive deeper into learning three.js, I've encountered a stumbling block that has halted my progress.

Despite spending days scouring for solutions, I have not been able to find a suitable answer to my dilemma.

The issue pertains to the inability to import materials of a JSON model. The error message "Cannot read property 'length' of undefined" keeps popping up, leaving me perplexed.

The code snippet I'm using for importing is quite straightforward:

var loader = new THREE.ObjectLoader();
loader.load( "island.json", function ( geometry, materials ) {
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    scene.add( mesh );
    render();
} );

The JSON file I'm attempting to import is extensive, so I created a smaller sample which encounters the same error. You can view it here.

I am hopeful that someone can provide assistance!

Thank you in advance!

javascriptjsonthree.js

Answer №1

The JSON data isn't the problem; it's actually a mix-up between the JSONLoader and ObjectLoader.

While both JSONLoader and ObjectLoader can handle JSON files, they have different structures. Try this instead:

var loader = new THREE.ObjectLoader();
loader.load("island.json", function(object){
    scene.add(object);
});

For more information, check out:

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

Issue with Mouse Hover not functioning properly across various 3D objects

Trying to create a 3D line chart? Check it out Here Currently, the points and lines are working fine. However, I only want to detect mouse hover on the points (spheres) and not on the lines or grid. To achieve this, I have segregated all elements into dif ...

javascriptthree.js

Issues with Jquery content sliders

I am really struggling with this piece of code and I just can't seem to figure out what's causing the issue. If anyone has any insight on how I can make it display a slide for 3 seconds, fade out, show a new slide, and then loop back to the first ...

javascriptjqueryhtmlcssslider

Unable to debug json.loads() code using pdb

I am curious to understand the inner workings of converting a JSON string to a Python dictionary using json.loads() For example: import json s = '{"a": 1, "b": 2}' # input json string d = json.loads(s) # output dictionary object To dive de ...

pythonjsondebuggingpdb

Effortlessly transfer files with Ajax through Box

I attempted to utilize the Box.com API for file uploads according to instructions from https://gist.github.com/seanrose/5570650. However, I encountered the following error message: `XMLHttpRequest cannot load "". No 'Access-Control-Allow-Origin&ap ...

javascriptajaxbox-apiboxboxapiv2

Steps to update a JSON file when running a query:

Is there a way to update the json file results.json without having to execute the demo.php file? demo.php <?php header("content-type:application/json"); require_once("dbConnect.php"); $sql = "SELECT id ,,fullname ...

javaphpandroidarraysjson

Utilizing the Jquery datetimepicker (xdsoft) to dynamically limit the date range between two inline datepickers

Check out the Jquery datepicker plugin available here: We previously had a setup where we could dynamically restrict the date range with two datepickers when text inputs are clicked on. However, the client now wants the calendars to be displayed inline, c ...

javascriptjquerydatepicker

Encountered an issue while attempting to deploy my app on Heroku: received the error message "The requested resource does not have the 'Access-Control-Allow-Origin' header"

Hi fellow developers, I'm currently facing an issue while trying to upload a simple app to my Herokuapp. Every time I attempt to log in or sign up and establish a connection with the back-end, I encounter the following CORS error: "Access to fetch at ...

javascriptjavaspring-bootvue.jsheroku

Javascript Countdown Timer for HTML5 Canvas Animation

I'm currently working on a countdown in javascript using createJS for Flash Canvas HTML5, however, I've encountered the following error: file_Canvas.js:318 Uncaught TypeError: Cannot read property 'dtxt_days' of undefined This error sp ...

javascripthtmlcanvascreatejs

When using html-webpack-plugin with webpack 2, there is no need for a starting slash '/'

I am in the process of migrating my webpack 1 project to webpack 2. Most of it is working smoothly, except for the issue I am facing with html-webpack-plugin: When using it in webpack 2, the script tag that gets generated looks like this: <script typ ...

javascriptwebpackwebpack-2html-webpack-plugin

Which file should I include in the .gitignore, jsconfig.json or tsconfig.json?

When working on a project, the utilization of a jsconfig file is required. The jsconfig file typically appears as follows: { "compilerOptions": { "baseUrl": ".", "paths": { "*": [ "src/*" ], ...

javascriptnode.jsvisual-studio-codegitignore

How can you customize the output of JSON.stringify for objects in JavaScript?

What steps can be taken to customize the default output of JSON.stringify for an object? ...

javascriptjson

What is causing Angular services to malfunction when used within setTimeout and setInterval functions?

manage-tasks.component.html <p>manage-tasks works!</p> <form #taskForm="ngForm"> <input type="text" name="task_name" palceholder="Task Name" [(ngModel)]="task_service.selected_task.name& ...

javascriptangulartypescript

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

Verify if the radio element is marked as selected in the AJAX reply

My ajax response contains two radio elements and I need to check if they are checked in the response. I've tried using the code below to check the radio status but it's not working: $('#input[type=radio]').each(function(){ alert($( ...

javascriptjqueryajaxresponse

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

javascriptreactjsreact-hook-form

Dynamic SVG circles with timer and progress animation

Is there a way to modify the following: var el = document.getElementById('graph'); // get canvas var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineW ...

javascripthtmlcsssvg

Animate a nested element dynamically with jQuery

Whenever I click on the "view" button, I am dynamically adding data to a div. This feature is working perfectly fine. However, I wanted to improve it by adding another nested dynamic element. The problem I'm facing now is that when I try to expand al ...

javascriptjquery

HTML - implementing a login system without the use of PHP

While I am aware that the answer may lean towards being negative, I am currently in the process of developing a series of web pages for an IST assignment in Year 9. Unfortunately, the web page cannot be hosted and our assessor lacks the expertise to utiliz ...

javascriptphphtmlauthentication

Is it possible to employ the face recognition npm package within a React project?

Currently, I am diving into the world of React and experimenting with integrating the npm package known as face-recognition within my React project. However, it appears that the documentation provided by the package is primarily tailored for Node.js. Upon ...

javascriptnode.jsreactjsnpm

When attempting to add a new Long value to a JSONArray using JSONArray.add(new Long(value)), and subsequently retrieving the

When constructing my JSON on the server side, I follow this approach: JSONArray mArray = new JSONArray(); mArray.add(new Long(m.matchId)); // where matchID is a long value In the client application (Android), I aim to interpret the incoming JSON like so: ...

javaandroidjson