Vfrdtyky

I'm trying to render an object with materials using Three.js, but it looks differently than in other online viewers like https://3dviewer.net (also uses Three.js under the hood)

I tried to rise level of details (LOD) and also used NearestFilter / LinearFilter but without any effect.

This is how it should look (screenshot of rendered by 3dviewer object) .

And this is how it looks in my app

In 3dviewer version it looks more natural, and in my it is too shiny and glossy

Should I apply some specific filter (though did not find it in 3dviewer sources) or may be lighting?

My current code is:

let scene = new THREE.Scene();

scene.background = new THREE.Color( '#edeff2' );



let camera = new THREE.PerspectiveCamera( 100,   window.innerWidth/window.innerHeight, 1, 1000 );

camera.position.z = 100;



let renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );



let controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.enableDamping = true;

controls.dampingFactor = 0.25;

controls.enableZoom = true;



let keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);

keyLight.position.set(-100, 0, 100);



let fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);

fillLight.position.set(100, 0, 100);



let backLight = new THREE.DirectionalLight(0xffffff, 1.0);

backLight.position.set(100, 0, -100).normalize();



scene.add(keyLight);

scene.add(fillLight);

scene.add(backLight);



let mtlLoader = new THREE.MTLLoader();

mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');

mtlLoader.setPath('/examples/3d-obj-loader/assets/');

mtlLoader.load('b.mtl', function (materials) {



materials.preload();



let objLoader = new THREE.OBJLoader();

objLoader.setMaterials(materials);

objLoader.setPath('/examples/3d-obj-loader/assets/');

objLoader.load('b.obj', function (object) {



    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()

});

});



var animate = function () {

    requestAnimationFrame( animate );

    controls.update();

    renderer.render(scene, camera);

};



animate();

Link to object, materials + textures - dropbox

You can easily access the materials of your object.

objLoader.load('b.obj', function (object) {

    // Access material

    var mat = object.material;



    // Make material less shiny

    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()

});

How you access the material depends on the structure of your object. It could be object.children[0].material, or object.children[0].children[0].material, depending on how it's nested.

I came across the same issue and I had to apply a filter to all of my materials:

function getAllMaterials( object ) {

 var out = ;

 object.traverse( function( node ) {

  if ( node instanceof THREE.Mesh ) { out.push( node.material ) }

 } );

 return out;

}



getAllMaterials( <your-3D-Object-Here> ).forEach( function ( mat ) {

 if ( Array.isArray( mat ) ) {

  mat.forEach( function( cmat ) { cmat.shininess /= 19; } )

 }

 else { mat.shininess /= 19 }

} );

You might need to change that static 19 in the code to whatever fits your needs. If you have any questions, I'll set up live example for you.