Issue with model not displaying after material added in OBLLoader + MTLLoader

After loading a material using MTLLoader and applying it to my model loaded with OBJLoader, the model itself mysteriously disappears.

MTLLoader.setPath( 'models/' );
var url = "model.mtl";
MTLLoader.load( url, function( materials ) {

    materials.preload();
    OBJLoader.setPath( 'models/' );
    OBJLoader.load( 'model.obj', function ( object ) {

object.traverse(function(child) {
      if (child instanceof THREE.Mesh) {
          child.material = materials ; // this is causing the issue
      }
        scene.add( object );
    });
  }); 

I am aware that the recommended way to set materials with MTLLoader is by using

OBJLoader.setMaterials(materials)
, but I prefer the method I've implemented above. However, for some reason, the object disappears without any errors when done this way. Can anyone shed light on why this might be happening?

Answer №1

When using <code>child.material, it is important to note that the expected material type should be something like MeshPhongMaterial. However, the materials provided by the callback function of MTLLoader.load does not match this type of material. Upon inspecting the source code, it becomes clear that the callback function returns a MaterialCreator object. Inside this object, there is a materials map which lists all materials parsed from the mtl file by their names. To assign the correct material to your object, you can use the following code snippet:

child.material = materials.materials[materialName];

If there is only one material and you are unsure of the name, you can also use:

child.material = materials.getAsArray()[0];

To further investigate, you can log the materials object itself: console.log(materials).

Please note that the above information is based on my examination of the MTLLoader source code and has not been personally tested.

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

Using Flask and jQuery, learn how to toggle the visibility of a reply text box

After a break from using HTML/JavaScript, I find myself a bit puzzled about how to handle this. I'm working on creating a reddit-like clone with Flask. I've reached a point where I can add child comments to any comment and have them display nic ...

What is the most effective way to identify mobile browsers using javascript/jquery?

As I develop a website, I am incorporating image preloading using JavaScript. However, I want to ensure that the preload_images() function is not called for users on slow bandwidth connections. In my experience, the main demographic with slow internet spe ...

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Looking for suggestions on how to efficiently transfer data from a Python script to a web browser. The Python script, as well as the browser, are operating under an xServer environment in Linux (specifically Raspbian on Raspberry Pi). The script is respon ...

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Currently, I have a view component setup where clicking the edit button directs me to the register component for form updates using patchvalue. The issue that I am facing is that when I update and register the form using the same button, it creates anothe ...

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Current Situation: I am currently in the process of iterating through a machine learning model and dynamically updating my "divs" as text labels. My goal is to transform these values into individual bars that visually represent the values instead of just d ...

Displaying images dynamically in Angular using ng-repeat with URL strings

I'm working on a project where I need to dynamically call pictures inside an ng-repeat loop. Initially, I tried adding a key/value pair of 'img' to the JSON object I'm fetching and then dropping it inside the URL. However, this approach ...

Error encountered using jQuery $.post: TypeError - e.type is not a valid function

I'm currently in the process of developing a feedback script specifically for the ZetaBoards forum software. My approach has been to create a $.post function, but when I attempt to submit the form by clicking the submit button, all I get in return is ...

issues with jquery progress bar not updating value

How can I display two progress bars with the same value specified in the data attribute? Here is the HTML code: <div> <div class="p" data-value="54"></div> </div> <div> <div class="p" data-value="45"></div> < ...

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such

Despite encountering similar questions, none of the provided answers seem to address the issue within my codebase. My project utilizes React 17, Mui v5, and TS v4. I attempted to integrate a basic component from an external package called rc-dock. I simply ...

Emphasize SELENIDE rows

My goal is to achieve the following: @Test public void tableTest() { getDriver().get(BASE_URL + "tabulka.php"); List<WebElement> rows = getDriver().findElements(By.xpath("//table//tbody//tr")); for (We ...

Passing a string to a function in AngularJS through ng-click

How can I pass a string to a function using ng click? Here's an example: HTML <a class="btn"> ng-click="test(STRING_TO_PASS)"</a> Controller $scope.test = function(stringOne, stringTwo){ valueOne = test(STRING_TO_PASS); } Edit - ...

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

Unlocking request header field access-control-allow-origin on VueJS

When attempting to send a POST request to the Slack API using raw JSON, I encountered the following error: Access to XMLHttpRequest at '' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field acces ...

display the information stored within the sports attribute using React

I am attempting to display the values stored in the sports property. So, I inserted a console log within the sports property. However, an error is being thrown: Syntax error: C:/codebase/src/containers/sports.js: Unexpected token, expec ...

perform the .then() function within a returned promise

Here is my code snippet: function scammer(message) { return new Promise((resolve,reject)=>{ if(condition){ if (condition) { bot.KickMember(params).then((message)=>{ console.log("kicked"); ...

Modifying an object property within a state container array in React using Hooks' useState

As a React beginner, I decided to create a simple Todo app. This app allows users to add tasks, delete all tasks, or delete individual tasks. The Todo Form component consists of an input field and two buttons - one for adding a task and the other for dele ...

When URL string parameters are sent to an MVC controller action, they are received as null values

Are You Using a Controller? public class MyController : Controller { [HttpGet] public ActionResult MyAction(int iMode, string strSearch) { return View(); } } Within my view, I have a specific div with the id of "center" I am runn ...

What is the proper way to send properties to a component that is enclosed within a Higher Order Component?

I have a situation where I need to pass props from the index page to a component wrapped inside two higher-order components. Despite fetching the data successfully in getStaticProps, when passing the props to the About component and console logging them in ...

Automatically bundle and release an NPM package using the libnpm library

My goal is to automate publishing to NPM within my CI/build system. I came across libnpmpublish, which appears to be the right tool for the job. However, it clearly states that it does not package code into a tarball, even though the publish API requires a ...

Refresh information in form after submitting with Remix

Currently, I am utilizing the Remix Form element to display my form with various input fields. When there is a server-side validation error, the entered text in the fields remains, as expected. However, upon successful submission of the form, I would like ...