Error JSON material for MeshFaceMaterial encountered

Successfully loaded my model using the following code:

loader.load( "js/charWalk01.js", function( geometry, materials ) {
                mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
                scene.add( mesh );

            } );

However, encountered issues when attempting to implement MeshFaceMaterial to utilize the material in the JSON file resulting in two strange three.min.js error messages (shown below).

loader.load( "js/charWalk01.js", function( geometry, materials ) {
                materials[ 0 ].morphTargets = true;
                mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
                scene.add( mesh );
            } );

The errors are: 

    TypeError: 'undefined' is not an object (evaluating 'a.map') three.min.js:347

    TypeError: 'undefined' is not an object (evaluating 'ma.attributes') three.min.js:429

The JSON file is in standard format (converted with the OBJ converter). Here is the material code extracted from it:

    "materials": [  {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Mat.1",
"colorDiffuse" : [1.0, 1.0, 1.0],
"colorSpecular" : [0.4, 0.52, 0.53],
"illumination" : 4,
"mapDiffuse" : "Character_01.jpg"
}],

Any insights into the possible causes of these errors?

Thanks, Ian

javascriptthree.js

Answer №1

To properly utilize MeshFaceMaterials, make sure to include the materials argument when calling the function:

loader.load( "js/characterModel.js", function( data, materials ) {
    materials[ 0 ].needsUpdate = true;
    model = new THREE.Mesh( data, new THREE.MeshFaceMaterial( materials ) );
    scene.add( model );
} );

Version of three.js used: r.53

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

JavaScript / AngularJS - Efficient Boolean Switching

My group of Boolean variables can toggle other variables to false when set to true. I am looking for a clean pattern for this approach, especially since the number of boolean variables may increase. angular.module("app", []) .controller("controller", ...

javascriptangularjs

Various concatenated and compressed JavaScript files across multiple HTML documents within a single application

In my express.js application, I have different routes such as /home and /dashboard. For example, on the home page, I include: jquery.js, underscore.js, somemodule1.js, somemodule2.js. On the dashboard, I include: jquery.js, underscore.js, somemodule3.js, ...

javascriptnode.jsexpressmergeminify

Discovering the necessary WebGL browser Add-ons

I have been developing a WebGL application using ThreeJs to showcase 3D models with various effects (shaders). In order to test if the user's browser can run the app, I need to retrieve a list of supported plugins. The Query: My main dilemma is deter ...

javascriptthree.jswebglwebgl-extensions

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin

I have a Service that retrieves a token using Observable and an HttpInterceptor to inject the token into every http request. It works seamlessly with a single request, but when using forkJoin, no response is received. Here is the code for the interceptor: ...

javascriptangulartypescriptrxjsangular6

The proper way to cancel useEffect's Async in TypeScript

I'm facing an issue with this straightforward example: useEffect(() => { axios.get(...).then(...).catch(...) }, [props.foo]) warning: can't perform a react state update on an unmounted component After some investigation, I found this ...

javascriptreactjstypescriptuse-effect

Creating various functions for Joomla's AJAX component development

My component is currently working smoothly with AJAX and mootools. The view.raw.php file contains only one function called display. I've been attempting to add other functions within the component that can be accessed through AJAX, but have been facin ...

javascriptphpajaxjoomlamootools

Cleaning up objects from memory in JavaScript following an AJAX request

I am developing a web application with dynamic content loading. In my code, I have a main container div (<div id="container"/>) where I use AJAX to load HTML content. // function overwritten by loadMenu functions // called before loading a new sect ...

javascriptperformancememory-leaks

Utilizing Jquery for Enhancing Annotations

I am in the process of developing a website for essay writing tests. I have implemented a feature where users can input their essays using a text area, and now I want to be able to make comments on that text similar to PDF annotations or highlighting. I at ...

javascriptjqueryhtml

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

I am interested in incorporating the unique “piece of valuable flair™” from MathOverflow onto my website. The issue I am facing is that I want my webpage to comply with XHTML5 standards, meaning it should be served with the MIME type application/xht ...

javascriptjquerymime-typesstackexchangehtml

Struggling with Data Rearrangement using Map Reduce技

I'm struggling with pivoting my dataset using map reduce. Despite referencing the MongoDB cookbook for guidance, I'm encountering some strange errors. I aim to restructure the provided collection so that each user has a comprehensive list of all ...

javascriptmongodbfor-loopmapreduce

AngularJs input field with a dynamic ng-model for real-time data binding

Currently facing an issue with my static template on the render page. <form name="AddArticle" ng-submit="addArticle()" class="form add-article"> <input type="text" value="first" init-from-form ng-model="article.text[0]" /> <input typ ...

javascriptangularjsangularjs-directive

What is the correct way to properly insert a display none attribute

I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...

javascripthtmlcss

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

The index.html file is failing to load/render when using app.js

I am currently in the process of creating a to-do list using an older tutorial. The app.js file seems to be functioning properly, however, when I try to run it locally, all I see is a blank page instead of my HTML content. Here is the code found in the ap ...

javascriptexpress

Formik causing malfunction in MUI DatePicker functionality

In my React project, I am using Formik to manage form processing and MUI UI components for the user interface. While I can select the day and month, I'm experiencing an issue with the year part not updating. Even when I manually type in a year in the ...

javascriptreactjsmaterial-uidatepickerformik

Issue with useState in Next.js when fetching data from an API

When attempting to retrieve data from the API, I am receiving a response. However, when trying to set the data to useState using the setAccessData function, the data is not being accessed properly. Despite trying multiple methods, the data continues to sho ...

javascriptreactjsnext.js

What is the best way to implement a front-end CSS style for text instead of a background style?

I have HTML text I want to style with a color like rgba(0,0,0,0.1), but I want the color to appear above or on top of the text, not below or behind it. Issue: How can I accomplish this? (CSS or JavaScript solutions are welcome). Thank you in advance for ...

javascripthtmlcss

Utilize the filtering functionality in AngularJS to narrow down the search results

I have a table filled with data and I am trying to filter out any rows that have a datetime value that is not current (today's date) or alternatively, change the background color of those specific rows. I have attempted the following code but it is no ...

javascripthtmlangularjs

Retrieve data using the designated key and convert it into JSON format

If I have the following JSON array: [ {"data": [ {"W":1,"A1":"123"}, {"W":1,"A1":"456"}, {"W":2,"A1":"4578"}, {"W":2,"A1":"2423"}, {"W":2,"A1":"2432"}, {"W":2,"A1":"24324" ...

javascriptjson

Ways to retrieve an item from a series of successive arrays

I'm struggling to find a solution to my current issue. My goal is to retrieve the item at a specific index from a collection of separate arrays without merging them together. Typically, to access the 3rd item in an array, you would use: function get ...

javascriptarraysindexof