I am having trouble loading materials from JSONLoader in Three.js

Hi there, I am working on implementing a simple TheeJS code that will allow me to load some 3D js files using JSONLoader. These 3D files were exported from Blender exporter, but when I run this part of the code, I encounter two errors:

Uncaught TypeError: Cannot read property 'map' of undefined
Uncaught TypeError: Cannot read property 'attributes' of undefined

Here is a snippet of my code where I attempt to load the JSON 3D file:

var load = function ( file, callback )
{
    var loader = new THREE.JSONLoader();
    loader.load( file, function( geometry, materials ){
        callback( new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ) );
    });
}

load("models/porsche.js", function(car){
    car.position.set( 0, 0, -2 );
    car.rotation.y = Math.PI / -2;
    scene.add(car);
});

Furthermore, when I use other types of Materials like Phong or Lambert, it works perfectly fine. However, these errors only occur when I use MeshFaceMaterial. Any suggestions on what I should do?

Answer №1

Could it be possible that the issue lies within the JSON file? Verify if the parameter for shading is accurate in the material, such as "shading": "Lambert".

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

What are the steps for displaying the normal map in Unity and Three.js using shaders?

     When attempting to render the normal map in both three.js and Unity, I noticed that the final output differs between the two platforms. Here is the shader used in Unity: Shader "Unlit/normal" { Properties { _MainTex ("Texture", ...

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Encountered a strange bug in my code where I'm struggling to achieve constant time lookup from a Map when using a tuple as the key. Here is an example highlighting the issue, along with the workaround I am currently using to make it function: hello. ...

Having difficulties transmitting numerical values through res.send() in express with node

Currently, I'm faced with a challenge in my express application on node.js as I attempt to retrieve the "imdb rating." movies.json [{ "id": "3962210", "order": [4.361276149749756, 1988], "fields": { "year": 2015, "title": "David and Goliath" ...

Implementing folder-specific routing in Express js

I'm struggling to figure out how to implement a solution that functions like this code snippet. I need to serve different folders based on various parameters, but I'm hitting a roadblock. An example of this in action would be incredibly helpful. ...

Efficient segmentation of text using CSS and JavaScript

Currently, I'm involved in a project that allows users to create their own timelines with events. However, there seems to be an issue with the event titles. Users are able to create events with extremely long titles, such as: `1231231231231231231231 ...

How to Use Javascript to Listen for Events on a Different Web Page

Is it possible to open a popup using window.open and then subscribe to page events (such as onload) of the popup from the opener? I am looking for a method in my parent page (opener) that will execute when the popup's onload or ready event fires. Can ...

Unlock the secrets of creating an interactive chat room effortlessly by harnessing the power of J

In search of implementing a unique chat room using PHP and JavaScript (Jquery) offering group chat as well as private chat functionalities. The challenge lies in finding a way to continuously update the interface seamlessly, while also displaying 'X ...

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

Steps to verify if a property of an object in an array aligns with any of the values in a separate object array

The header information might seem complicated at first, but let me simplify it for you. Consider the following object: const users= [ { id:"1", name:"John", email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data ...

The localhost of Mongod does not seem to be connecting properly with the 'npm start' command of my program

I'm currently developing a prototype program that handles account registrations, and my approach involves utilizing Node.JS to write JavaScript code that can be utilized on mobile devices. After downloading MongoDB and setting up the data/db director ...

Gathering the output from every function within an array of functions

I've searched extensively for a solution to this dilemma, but have had no luck so far. Therefore, I am turning to the community for help. Please feel free to direct me to any existing similar queries. My challenge involves working with an array of fu ...

Determine if an Image is Chosen upon Click with Javascript

I am currently working on a wysiwyg editor and I'm facing an issue where I need to determine if a user has clicked on an image within the selection range. Is there a method to detect this without attaching event handlers directly to the image itself? ...

What separates a typical update from using the $set operator for updating?

Standard procedure: module.exports = (_id, newInfo) => { return User.update( {_id} , newInfo); }; Alternative approach with $set operator: module.exports = (_id, newInfo) => { return User.update( {_id} , {$set: newInfo} ); }; ...

Creating a 3D polygon using points in Threejs

I seem to be struggling with what should be a straightforward task due to errors in my code or thinking process. My goal is to generate a polygon from a series of points that lie on the same plane and are arranged in a specific order around the shape. How ...

Tips for including a class in a HTML document using jQuery?

I have successfully included my header and footer in separate HTML files using jQuery's .load() function. The jQuery code I used is shown below: $(function(){ $("#header").load("page-component/header.html"); $("#footer").load("page-component/f ...

Managing numerous inquiries from a single customer within a succession of brief intervals

After creating a web application with a dashboard to showcase different reports and graphs based on user selections, I encountered an issue. Users can interact with the reports using checkboxes and radio buttons. Every time a checkbox or radio button is s ...

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

Trouble retrieving data using component props

I am currently facing an issue with displaying data from the API in a component. The request is being made from the parent page, but the loop to display the data is within the child component. Unfortunately, the data is not showing up on the parent page as ...

Trouble updating Kendo DropDown in Internet Explorer

Having an issue with updating a Kendo DropDownList through a javascript function. It works fine in FireFox and Chrome, but not in Internet Explorer. @(Html.Kendo().DropDownList() .Name("myDDL") .HtmlAttributes(new { style = "width: 320px" }) . ...