The materialLoader in Three.js is experiencing difficulty loading an embedded texture image

When I export a material from three.js using the material.toJSON() method, I receive the following result:

{
"metadata":{"version":4.5,"type":"Material","generator":"Material.toJSON"},
"uuid":"8E6F9A32-1952-4E12-A099-632637DBD732",
"type":"MeshStandardMaterial",
"color":11141120,
"roughness":1,
"metalness":0.5,
"emissive":0,
"map":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,

"textures":[
    {
        "uuid":"876D3309-43AD-4EEE-946F-A8AE8BA53C9E",
        "name":"",
        "mapping":300,
        "repeat":[1,1],
        "offset":[0,0],
        "center":[0,0],
        "rotation":0,
        "wrap":[1001,1001],
        "minFilter":1008,
        "magFilter":1006,
        "anisotropy":1,
        "flipY":true,
        "image":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952"}],

"images":[
{
    "uuid":"C6B4FEDA-8E7E-490A-A1AD-866ECE36E952",
    "url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAYAAADFkM5nAAAg[...]"
}]}

I attempted to use the MaterialLoader as suggested in the example.

However, I consistently encounter this error during parsing:

THREE.MaterialLoader: Undefined texture 876D3309-43AD-4EEE-946F-A8AE8BA53C9E

Is it incorrect to expect the MaterialLoader to utilize the embedded resources? Am I overlooking something or making a mistake? How can I load the images from the JSON file into the corresponding texture?

Thank you!

Here is a fiddle: http://jsfiddle.net/akmcv7Lh/211/

Answer №1

It is important to note that MaterialLoader does not have the capability to load textures. Prior to loading a JSON file, textures must be set using MaterialLoader.setTextures(), similar to how ObjectLoader operates:

const loader = new MaterialLoader();
loader.setTextures( textures );

Therefore, MaterialLoader can only function as an independent loader if the materials being used do not require textures. Otherwise, you will need to prepare the textures at the application level, following a process similar to how ObjectLoader handles it.

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

Decoding a singular object using Gson

The following is a JSON object: { user: { id: 1 avatar_url: "default.png" first_name: "Example" last_name: "User" email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c5c3d5c ...

Getting information from MongoDB using Node.js and Angular

Currently, I am facing difficulty in retrieving data from MongoDB (I'm also using Mongoose) and sending it to Angular in order to populate the ng-repeat list with the retrieved data. I have managed to either display the data on a blank page directly f ...

JavaScript utilizing a PHP variable

In my attempt to merge a PHP variable with JavaScript, I aim to access the "the_link_to_the_page_I_want". window.onload = function openWindow() { window.open('the_link_to_the_page_I_want', 'newwindow', config='height ...

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

Can XMLHttpRequest be exploited for XSS attacks?

Can cross-site scripting be achieved using an XMLHttpRequest as a post method? For instance, in a chatroom where users can enter text. Normally, inserting scripts like <script>alert("test")</script> would be blocked. However, you could write a ...

Error occurs when deserializing a JSON list as null

Looking at the JSON data provided: json = <json>{ "Header": { "MCC": "415", "FO": "0", "REGID": "2" }, "Contacts": [ { "mo": "70875623", "name": "salam" }, { "name": "salam2", "mo": "70242 ...

Converting a JSON array of strings into a TStringList in Delphi 2007

While Delphi 2009 brought in JSON types, I am currently working with Delphi 2007 that lacks these JSON types. I am looking to parse a JSON string that represents an "array of strings" into a TStringList object. For example: ["Ford", "BMW", "Fiat"] I bel ...

Tips for preserving scroll position within a division following the redisplay of a division in Vue.js

Within my Laravel and Vue project, I have set up a feature to display posts in a scrollable area. This area is only visible when the 'showFeed' variable is true. <div v-show="showFeed" class="scroll-container" v-scroll=&quo ...

I am encountering an issue stating "indexRouter has not been defined"

Encountering an error "indexRouter is not defined" while attempting to run the code below. Despite attempts to remove the line, additional errors persist. Can anyone clarify the rationale behind using the common variable router for both index.js and user.j ...

When using Intl.DateTimeFormat, unexpected output may occur when formatting dates prior to the year 1847

Why do dates before 1848 result in May 10 when formatted? Could this be related to time zones? And if so, how can I prevent this issue when creating a date object from an ISO date string like YYYY-MM-DD format? (Tested on Chrome 59) const workingDate ...

I encountered a "ReferenceError: db is not defined" while trying to call a function in Express.js with MongoDB intergr

The structure of the code is as follows: var express = require('express'); var router = express.Router(); var mongo = require('mongodb').MongoClient; function getData(){ db.collection("collection_name").find({}).toArray(function (er ...

The X axis of the Perspective Camera in Three.js has been inverted

I am encountering an issue in my scene where I have two cameras - one orthographic and one perspective. The orthographic camera displays everything correctly, but the perspective camera shows the scene's X axis upside down. Is there a solution to fix ...

Highchart won't load data from a PHP JSON request

Having trouble populating my Highchart with JSON data. The data shows up correctly on the webpage, but when using Highcharts, nothing happens. Once I remove the PHP and input static numbers, the chart generates successfully. In summary, Highcharts does n ...

Issues with JQuery list selectors

Many individuals have raised concerns about selectors in the past, but no matter what I try, my code seems right yet it doesn't work as intended. My situation involves a list of actions that are displayed or hidden when their corresponding "folder" is ...

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

I am looking to iterate through an array of objects and call a method on them. If the result of that method meets certain conditions, I want to immediately return that result. The current implementation is as follows: public getFirstMatch(value: string, a ...

displaying images from a JSON URL in an Android ListView

I have successfully created a program that retrieves text data from JSON and displays it in a list view. However, I am now facing an issue with displaying images in the list view using ImageView. Can someone please assist me with this? Below is the code s ...

JavaScript EasyBitConverter

Looking to create a basic C# BitConverter equivalent in JavaScript, I've developed a simple BitConverter implementation. class MyBitConverter { constructor() {} GetBytes(int) { var b = new Buffer(8); b[0] = int; b ...

What is the best way to retrieve particular JSON components using PHP?

Trying out a simple program that interacts with the Merriam-Webster API by passing a list of words and receiving back the definition, part of speech, sample sentence, etc. Here's an example of the JSON string returned for each word by the API: { ...

What is the process for making a referenced variable null?

My scenario is as follows: When a user clicks on a button in Phaser.io, I create a new Phaser.sprite and store it in a local variable called newSquare. This new sprite is then added to an array called Squares. At a later point, I call a function to destr ...

Attempting to provide varying values causes If/Else to become unresponsive

I've implemented a function that scans a file for a specific term and then outputs the entire line as a JSON object. Strangely, when I include an else statement in the logic, an error occurs: _http_outgoing.js:335 throw new Error('Can\& ...