Oops! Looks like we have encountered an issue in three.js: The constructor for Materials[json.type]

I've been developing a web application that displays 3D animated models created in 'Maya 2016'. These models are exported using the three.js (r81) 'maya exporter plugin'. For those interested, you can find the maya exporter plugin here. When I try to load the exported json model using the code snippet below:

var objectLoader = new THREE.ObjectLoader(manager);
objectLoader.load( 'assets/New-Heart/full_heart.json', function (object) {            
    scene.add(object);
}, onProgress, onError );

An error is generated: Uncaught TypeError: Materials[json.type] is not a constructor, which originates from the three.js library file (var material = new Materials json.type ;) at line number 31381.

I am seeking assistance in resolving this issue. Any suggestions or guidance would be greatly appreciated.

javascriptthree.js

Answer №1

Earlier today, I encountered a specific error which led me to investigate the json.type within the json object that was passed. Upon inspection, I discovered that the type being returned was "MeshFaceMaterial", however this type is no longer valid in R82. The Materials object in ThreeJs R82 contains a list of valid materials types. If your type does not match any of these, it may be the cause of the error you are encountering.

var Materials = Object.freeze({
    ShadowMaterial: ShadowMaterial,
    SpriteMaterial: SpriteMaterial,
    RawShaderMaterial: RawShaderMaterial,
    ShaderMaterial: ShaderMaterial,
    PointsMaterial: PointsMaterial,
    MultiMaterial: MultiMaterial,
    MeshPhysicalMaterial: MeshPhysicalMaterial,
    MeshStandardMaterial: MeshStandardMaterial,
    MeshPhongMaterial: MeshPhongMaterial,
    MeshNormalMaterial: MeshNormalMaterial,
    MeshLambertMaterial: MeshLambertMaterial,
    MeshDepthMaterial: MeshDepthMaterial,
    MeshBasicMaterial: MeshBasicMaterial,
    LineDashedMaterial: LineDashedMaterial,
    LineBasicMaterial: LineBasicMaterial,
    Material: Material
});

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

Retrieve the latency of the interaction.reply() method

While there have been many inquiries regarding how to create a ping command for a discord.js bot, my question stands out because I am attempting to develop this command for interaction rather than message. I attempted utilizing Date.now() - interaction.cre ...

javascriptnode.jsdiscorddiscord.jsbots

Animate the CSS with a delay using styled-components

Is it possible to delay the opacity to zero when a certain condition is met? The loader bar is controlled using JavaScript, but can this delay be achieved using CSS alone? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; bord ...

javascriptcssreactjs

Converting all numbers separated by commas to numbers separated by periods in a string using JavaScript

Imagine a scenario where you have a string containing numbers, such as, test() test 12,01% test (12,4) 12.3 s 2 some other text, other text, 2,text Your task is to replace the numbers with decimals instead of commas without altering anything else in the ...

javascriptregex

What's the best way to trigger useEffect whenever a useRef variable gets updated?

I am facing an issue where the variable changes are lost on every re-render when trying to have useEffect run every time it modifies a variable. Using useRef to store the variable between renders leads to useEffect not detecting changes to a ref. I came a ...

javascriptreactjsscrollreact-ref

"Troubleshooting issue: Unable to retrieve grid data from Google Sheets API v4 when integrated

I've implemented a function within a React component that retrieves JSON data from an API request and logs it: async function getAllSheets() { let response; try { response = await window.gapi.client.sheets.spreadsheets.values.batchGet( ...

javascriptreactjsgoogle-sheets-api

How can we use forEach on an array or JSON data while sorting by the most recent date?

How can I reverse the order of data in the "forEach" loop so that the latest date is displayed first instead of the oldest to newest? var json = { // JSON data goes here } json.TrackingRecord.MovementInformation.Movement.reverse().forEach(function(it ...

javascriptjson

Troubleshooting Problem with Scrolling Sticky Element on iOS Devices

This is specifically for mobile devices I am facing an issue with a relative positioned element where it should become fixed to the top of the screen when the scroll position exceeds the top position of the element. However, in iOS, when scrolling, the f ...

javascriptjqueryiosios9sticky

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Error encountered in Next.js when defining columns for a MUI data grid

Currently, I am integrating MUI Data Grid into a Next.js app under development. While attempting to define a more intricate column structure, I encountered an error: { field: 'home_address', valueGetter: (value, row) => { retur ...

javascriptreactjsnext.jsmaterial-uimui-x

Learn how to dynamically import and load components in VueJS while rendering a list

I am currently rendering a list. <div v-for="msg in messages"> <div v-if="msg.type==='component'"> <component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component> </div> ...

javascriptvue.jscomponents

Display the value in Vue.js as a price format while maintaining it as an integer

I have created a Vue component called "formatted-number" which takes in an integer value (e.g. 1234) and currently displays it as a string (e.g. "12.34") to represent a price in a textfield, with the appropriate "," or "." based on the country. However, I ...

javascriptfocusvue.js

Implementing Axios Get request to an Express backend

I'm new to the back-end development world, currently focusing on learning Front-End but I've decided to venture into creating my own server using Node.js. I have successfully installed Express, Cors, and Axios. It appears to be functioning as I c ...

javascriptnode.jsexpressaxiosbackend

Why is my Laravel Vue CRUD not automatically updating the posts section with new data?

Hey there, I've been working on a project using Laravel 5.6 with Vue.js for CRUD functionality. I'm trying to display the posts I've just added in the posts section without having to reload the entire page. However, my current code is only s ...

javascriptphplaravelvue.js

Could the delete button in a Chip component from Material-UI be customized with a unique style?

I'm having no issues styling the label or background color of the chip itself. However, it appears that the delete button inside the chip is an SVG icon. Is there a method to change the color of this icon? ...

javascriptreactjsmaterial-ui

The abort() function in Chrome can trigger an Undefined Error

When dealing with race conditions, I implement the following code to throttle get requests: if (currentAjaxRequest !== null) { currentAjaxRequest.abort(); } var query_string = getQuery(); currentAjaxRequest = ...

javascriptjqueryajaxxmlhttprequestabort

Exploring the world of Node.js callback parameter passing

Currently, I am diving into the world of Node callbacks and JavaScript in general. As I delve deeper, I find myself puzzled by the following snippet: var request = require('request'); request('http://www.google.com', function (error, ...

javascriptnode.jscallback

Shifting Directive Logic to a Method within a Vue Component

I am currently working with a VueJS component that utilizes the style attribute in the following way: <section :style="{ backgroundImage: src && 'url(' + src + ')' }"> ... <script> export default { props: [& ...

javascriptvue.jsvuejs2vue-component

Steps for placing a checkbox in a group within a different column in ag-grid

I'm attempting to add checkboxes for all the rows in the Athlete column, excluding the group columns. Also, I would like to remove the toggling feature from the groups so that users cannot collapse them. Any assistance with this issue would be great ...

javascriptreactjsag-gridag-grid-angularag-grid-react

Triggering the body onunload event

I am currently developing a HTA that needs to make final modifications on the onunload event. However, I am facing an issue as the event does not appear to be triggered. Can someone confirm if this event is still supported? Is there an equivalent event in ...

javascripthtmleventsdom-eventshta

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

javascriptjqueryhtmlcss