What are the steps to modifying the material characteristics of a model loaded using OBJ + MTLLoader?

After successfully loading an .obj model along with its corresponding .mtl file to correctly map the materials onto the model, I noticed that the loaded model appears very dark. To brighten it up, I attempted to change the emissive color to white but encountered some difficulty in doing so. The code snippet I currently have is as follows:

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

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

        scene.add( object );

    });
});

I also tried implementing the following:

object.traverse (function (child) {
            if (child instanceof THREE.Mesh) {
              child.material = new THREE.MeshLambertMaterial({emissive: 'white'});
            }
         });

While this does create an emissive material, it does not take into account the .mtl file. Is there a way to blend both the material settings from the .mtl file and the emissive color change I am attempting? I have not been able to find any information on this issue, and any help would be greatly appreciated. Thank you.

Answer №1

Instead of completely replacing the material, the correct approach is to make modifications by adjusting the emissive value only:

object.traverse (function (child) {
        if (child instanceof THREE.Mesh) {
          child.material.emissive.setHex( 0xFFFFFF );
        }
     });

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

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

Can a Typescript class type be defined without explicitly creating a JavaScript class?

I am exploring the idea of creating a specific class type for classes that possess certain properties. For example: class Cat { name = 'cat'; } class Dog { name = 'dog'; } type Animal = ???; function foo(AnimalClass: Animal) { ...

Changing the z-index property of a Material-UI <Select> dropdown: What you need to know

Currently, I am implementing an <AppBar> with a significantly high z-index value (using withStyles, it is set to theme.zIndex.modal + 2 which results in 1202). The primary purpose behind this decision is to guarantee that my <Drawer> component ...

Tips for managing cookies in an Angular.js project

At the moment, I am utilizing an AngularJS application. To store certain values in a cookie, I incorporated the angular-cookies-min script to add values to cookies. The following code snippet was used to save values to a cookie: $cookieStore.put("userIn ...

When running 'npm run dev', an error occurred after the SizeLimitsPlugin emitted at 98%. The specific dependency that was

I encountered an issue while trying to incorporate Google Maps into my Laravel project and received the following error message after running npm run dev: 98% after emitting SizeLimitsPlugin ERROR Failed to compile with 1 errors 10:52:34 PM This dependen ...

Switch between class and slider photos

I am currently having an issue toggling the class. Here is the code I am working with: http://jsfiddle.net/h1x52v5b/2/ The problem arises when trying to remove a class from the first child of Ul. I initially set it up like this: var len=titles.length, ...

Discover the method for inserting a title attribute value into a span element

Utilizing AngularJS to retrieve and display data within a span element. I am now aiming to utilize this value as the title for another span element. The current code being used is shown below: <span style="display: inline-block; width: 160px">{{acti ...

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...

Tips for creating a Vuex mutation without using asynchronous promises

I have a project underway that involves building an app using Vue.js, Vuex, and Firebase to update data from Firestore database to the state in mutations. Even though mutations are synchronous and promises (.then) are asynchronous, my current implementat ...

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...

Discovering the maximum value and fetching it from an array

Can you help me identify the array element with the highest 'conversion' value? var barTextData = [ { term: "Roof", clicks: 11235, conversion: 3.12 }, { term: "Snow", clicks: 6309, conversion: 4.45 }, { term: "Chains" ...

add text nodes with unnecessary quotation marks around my selection list

Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...

Utilizing Vue components to streamline the process of adding and updating data

I have a rather straightforward parent/child component. I am looking to utilize the child component in two ways - first, for adding a new entry and second, for updating an entity. Here are the components that I've built: https://codepen.io/anon/pen/b ...

Maximizing React Performance: Strategies for Avoiding Unnecessary Renderings on State Updates

I am facing a major performance issue due to constant re-rendering of my child components on every state change. I need a solution to prevent this from happening and maintain the stability of my application. Any suggestions or guidance would be highly ap ...

Showing changes in state in real-time using ReactJS: A quick guide

Hello, I am currently facing an issue while trying to add a comment and display it immediately on the DOM. Whenever I type any word in the form box, it does not appear in the box. Additionally, pressing the enter key does not trigger a POST request. Could ...

Transform the display format of the input type date field from 'MM/DD/YYYY' to 'February 5, 2012' in a React.js application using Material-UI's TextField component

https://i.stack.imgur.com/9p7Mz.jpg I am working with a material-ui/ TextField date component and I am looking to maintain the current style and input method, but I need to adjust how the entered value is displayed to the 'en-us' format. const o ...

Nuxt encountered an issue with Vue hydration: "Tried to hydrate existing markup, but the container is empty. Resorting to full mount instead."

I'm facing an issue while trying to integrate SSR into my project. I keep encountering this error/warning. How can I pinpoint the problem in my code? There are numerous components in my project, so I'm unsure if I should share all of my code, b ...

Instead of receiving my custom JSON error message, Express is showing the server's default HTML error page when returning errors

I have set up a REST api on an Express server, with a React app for the front-end. The design includes sending JSON to the front-end in case of errors, which can be used to display error messages such as modals on the client side. Below is an example from ...

What is the best way to utilize this resulting value as an input?

I am trying to generate a random number using math.random and use that value in the following script: let bday = Math.floor( Math.random() * (30 - 1 + 1) + 1 ); await test.page.select('select[name="day_select"]',bday); However, I am ...

What is the most effective way to communicate to my client that attempting to conceal the browser toolbar is an ill-advised decision?

One of my clients has a friend who claims to be conducting 'security testing' and insists that the PHP Zend Framework application I developed for them should implement certain browser-side features: hide the location bar, toolbar, bookmarks, me ...