Utilizing Metalness with the MTLLoader in three.js

Lately, I've been utilizing MTLLoader to load my obj meshes in Threejs.

Although it does the job by loading the correct textures, the material appears too dull for my liking.

My expectation:

https://i.sstatic.net/Z2T9d.png

What I am currently seeing:

https://i.sstatic.net/OJxyG.png

I'm uncertain about how to adjust the "metalness," "roughness," "specular," etc. attributes of this mesh since I used MTLLoader.

I suspect that the matte appearance may be due to my lighting setup.

Here's the code for the lighting:

function setLighting(){
    const light = new THREE.PointLight(0xffffff, 2, 10);
    light.position.set(0, 10, 0);
    scene.add(light);
    var hemiLight = new THREE.HemisphereLight( 0xffffbb, 0x080820, 2 );
    scene.add( hemiLight );
}

The above function is invoked only once in my script.

I would greatly appreciate any assistance.

Thank you!

Answer №1

I'm uncertain how to adjust the properties such as "metalness", "roughness", "specular", etc. for this mesh since I utilized MTLLoader.

It's important to note that materials loaded by MTLLoader are always instances of MeshPhongMaterial. This type of material does not support PBR (Physically Based Rendering), so you won't be able to configure properties like metalness and roughness. I recommend checking out the official documentation page for MeshPhongMaterial to understand the available properties.

Additionally, please keep in mind that MTLLoader does not support PBR materials like MeshStandardMaterial or MeshPhysicalMaterial because the OBJ/MTL standard does not define a PBR workflow. If possible, it is recommended to use glTF instead of OBJ.

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

Encountering issues with Visual Studio Code following the integration of the MongoDB API Mongoose into my code

As I delve into the world of web development, I have been exploring databases with MongoDB Atlas and mongoose. Interestingly, my debugging process has hit a bump when using the node.js(legacy) debugger in VS code after importing mongoose with const mongoos ...

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue <!-- Updated main content --> <main> <p> Click on the menu button located in the top right ...

Looking to update the URLs in the text data to a different value

I am facing an issue with a list of links stored in a string. var data='<ol> <li><a href="#/getpage/getData/1">A Christmas Carol</a></li> <li><a href="#/getpage/getData/2">Copyright</a></li ...

Ways to ensure that list items have uniform height

I currently have a group of elements arranged horizontally using the display:inline-block property. However, one element is larger in height than the rest and extends beyond its boundaries. How can I adjust this element to match the height of the others w ...

Issue with Empty Date Time Format in Vue2 Date-Picker

In our company, we use vue2-datepicker to manage the starting and ending times of meetings. The dates are stored in "YYYY-MM-DD HH:mm" format on the backend, but we convert them to "DD-MM-YYYY HH:mm" format when retrieving the data in the mounted() hook. T ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

Efficiently input text box values into a canvas in real-time using HTML canvas and keypress

There are three text boxes labeled textbox1, textbox2, and textbox3. I am looking to transfer the values entered into these text boxes directly onto a canvas (cnv) whenever a user types in them, and remove the value from the canvas when it is deleted fro ...

Service workers do not support fetching from .html files

Struggling with creating a functioning service worker for offline use has been a challenge. Despite trying numerous examples, the success has remained elusive. Initially, I suspected that the dynamic nature of my PHP-based website was causing the issue, or ...

Creating a dynamic nested accordion in ReactLearn how to build a nested accordion

Can you help me figure out how to create an accordion structure like this? -parent -subparent1 -subparent2 ... -subparentN - child I've got some data that looks like this. //parents {id: 1, name: "", ...

Optimizing nested collections with JavaScript arrays of boolean values

I have multiple nested collections of JavaScript objects and I believe there has to be a more efficient way to achieve what I'm doing. The goal is to access the values of the fields in Objects 1, 2, and 3 and check if they are true or false. Below is ...

Invoke the method in customButton component of fullcalendar

I've integrated a custom button into my fullcalendar: ngOnInit() { this.calendarOptions = { customButtons: { custom1: { text: 'Add event', click() { this.openModal(); } } }, height: 600, editable: t ...

Issue with connecting React Router v4 to Redux - dispatch function not being properly passed

Recently, I've been working on migrating my app to React Router v4 and encountered some challenges due to the significant changes in the API. Here's where I currently stand: Setting Up the Router const createStoreWithMiddleware = applyMiddlewar ...

What is the best way to locate this particular element on the webpage?

After using the right-click and selecting inspect element, I located the code of the desired element on the webpage: <input type="text" ng-if="!editing" ng-model="item.Price" ng-click="inputFocus()" ts="" required="" placeholder="قیمت :" class="ng- ...

The Jquery watermark extension in IE9 is capable of transmitting the watermark as the primary value of the form

I have integrated a plugin into my project. The plugin can be downloaded from this link. However, I am facing an issue where the watermark value is being submitted as the textbox's value in Internet Explorer 9. How can I resolve this problem? Intere ...

Unable to process form submission using Ajax in ASP.NET MVC

I'm having trouble with submitting a form using ajax and opening a modal dialog after the ajax function is successful. Whenever I click the submit button, the process doesn't complete. Where could the issue be, in the ajax method or somewhere el ...

Enhancing Dropdown Selections with Jquery and AngularJS

Is there a way to dynamically change the options in this dropdown menu? For example, could I update it to show <li><a data-action="100">100</a> when another button is clicked using ng-click()? <ul class="dropdown-menu pull-right" r ...

Methods for setting the value of a scope variable within a controller's function

I have a goal of presenting a page that calculates a balance in the background and displays it. To achieve this, I decided to separate the balance into its own directive. Here is the directive I have created: app.directive('smBalanceInfo', fun ...

When working with async functions in JavaScript using await, the second function may not necessarily wait for the first function to complete before executing again

My goal is to implement async await in Angular 10 for loading a list of users from the backend database (built with Spring Boot and MariaDB) using an http request, and then filtering that list for one specific user. However, I'm facing an issue where ...

Enhanced Button Dropdown Function

I have the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Expanding Dropdown Menu</tit ...

Steps to retrieve an ext.js grid using data from a database

I've been struggling to make a basic Ext.js application work, which is supposed to pull data from a database and show it in an Ext.js grid. However, all I keep getting is "Failure:true". If you could help me identify the mistake, that would be great. ...