Material appears abnormally shiny and reflective

Question

Material appears abnormally shiny and reflective

I've been working on rendering an object with materials using Three.js, but I've noticed that the final result looks different from what I see in other online viewers, such as , which also utilizes Three.js under the hood.

I've attempted to increase the level of details (LOD) and have experimented with NearestFilter / LinearFilter, but to no avail.

Here is a screenshot of how it should look when rendered by 3dviewer.

However, this is how it appears in my application

The object looks more natural in the 3dviewer version, while in mine, it appears too shiny and glossy.

Should I consider applying a specific filter (although I have not found it in the 3dviewer sources) or perhaps adjust the lighting?

Here is the current code I'm using:

... (code block unchanged) ...

For access to the object, materials, and textures, you can download them from this dropbox link.

javascript three.js

Answer 1

Answer №1

Accessing the materials associated with your object is a straightforward process.

objLoader.load('b.obj', function (object) {
    // Retrieve material
    var mat = object.material;

    // Adjust material properties
    mat.metalness = 0;
    mat.roughness = 1;

    scene.add(object);
    object.position.y -= 100;

    object.scale.x = 0.01;
    object.scale.y = 0.01;
    object.scale.z = 0.01;

    let boundingBox = new THREE.Box3().setFromObject(object)
    let size = boundingBox.getSize()
});

The method of accessing the material varies based on the organization of your object. It may involve object.children[0].material or

object.children[0].children[0].material

, depending on the nested structure.

Answer 2

Accessing the materials associated with your object is a straightforward process.

objLoader.load('b.obj', function (object) {
    // Retrieve material
    var mat = object.material;

    // Adjust material properties
    mat.metalness = 0;
    mat.roughness = 1;

    scene.add(object);
    object.position.y -= 100;

    object.scale.x = 0.01;
    object.scale.y = 0.01;
    object.scale.z = 0.01;

    let boundingBox = new THREE.Box3().setFromObject(object)
    let size = boundingBox.getSize()
});

The method of accessing the material varies based on the organization of your object. It may involve object.children[0].material or

object.children[0].children[0].material

, depending on the nested structure.

Answer 3

Answer №2

Encountering the same issue led me to implement a filter across all my materials:

function collectAllMaterials( object ) {
 var result = [];
 object.traverse( function( node ) {
  if ( node instanceof THREE.Mesh ) { result.push( node.material ) }
 } );
 return result;
}

collectAllMaterials( <your-3D-Object-Here> ).forEach( function ( mat ) {
 if ( Array.isArray( mat ) ) {
  mat.forEach( function( cmat ) { cmat.shininess /= 19; } )
 }
 else { mat.shininess /= 19 }
} );

You may need to adjust the static value of 19 in the code based on your specific requirements. Feel free to reach out if you need further clarification, I can provide a live demo for you.

Answer 4

Encountering the same issue led me to implement a filter across all my materials:

function collectAllMaterials( object ) {
 var result = [];
 object.traverse( function( node ) {
  if ( node instanceof THREE.Mesh ) { result.push( node.material ) }
 } );
 return result;
}

collectAllMaterials( <your-3D-Object-Here> ).forEach( function ( mat ) {
 if ( Array.isArray( mat ) ) {
  mat.forEach( function( cmat ) { cmat.shininess /= 19; } )
 }
 else { mat.shininess /= 19 }
} );

You may need to adjust the static value of 19 in the code based on your specific requirements. Feel free to reach out if you need further clarification, I can provide a live demo for you.

Material appears abnormally shiny and reflective

Answer №1

Answer №2

Similar questions

Using Vue.js: Execute a function with a delay, but start the delay over if there is any user input

Encase the event handler within JQuery

Using Node.js await function results in an undefined response

The absence of jasmine-node assertions in promises goes unnoticed

Top tips for handling HTML data in JSON format

Using the Selenium webdriver to reach the bottom of the page by scrolling vertically

Is there a way to retrieve all "a" tags with an "href" attribute that contains the term "youtube"?

I am working on customizing my WordPress website using three.js to add a background with a wireframe effect. However, I am facing difficulties in placing a sphere at the end of each line

Tool for controlling the layout of the viewport with Javascript

Opting to utilize a multidimensional JavaScript array or object is a more efficient method

How can one create a walking person animation using Blender, and what are the necessary coding procedures to export it as a JSON file?

Tips for handling a JSON payload retrieved through a POST request

Set an attribute without replacing any existing class attributes

Guidelines for setting the Id and value for a Hidden field

What is the best way to choose a specific JSON element?

The issue arises when the d3 startAngle and endAngle values are set to NaN, resulting in an

Is it possible to dynamically retrieve an element's style from @ViewChild in an Angular 2 component without needing an active approach?

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

Having difficulty arranging the material ui components in a left-to-right alignment

Switch between different react components