I'm rendering an object with textures using MTL and OBJ files with Three.js. My code here works but my model is displayed as flat shaded. How do I enable smooth shading?
var scene = new THREE.Scene();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('assets/');
mtlLoader.setBaseUrl('assets/');
mtlLoader.load('asset.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('asset.obj', function(object) {
//
// This solved my problem
//
object.traverse(function(child) {
if(child instanceof THREE.Mesh)
{
child.material.shading = THREE.SmoothShading;
}
});
//
//
scene.add(object);
});
});
EDIT: I updated my code with a solution that fixed my problem based on the accepted answer.
I'm rendering an object with textures using MTL and OBJ files with Three.js. My code here works but my model is displayed as flat shaded. How do I enable smooth shading?
var scene = new THREE.Scene();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('assets/');
mtlLoader.setBaseUrl('assets/');
mtlLoader.load('asset.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('assets/');
objLoader.load('asset.obj', function(object) {
//
// This solved my problem
//
object.traverse(function(child) {
if(child instanceof THREE.Mesh)
{
child.material.shading = THREE.SmoothShading;
}
});
//
//
scene.add(object);
});
});
EDIT: I updated my code with a solution that fixed my problem based on the accepted answer.
Share Improve this question edited Jun 28, 2017 at 20:32 Berry Blue asked Jun 25, 2017 at 18:43 Berry BlueBerry Blue 16.5k21 gold badges75 silver badges145 bronze badges 5- most probably: stackoverflow./questions/29202480/… – gaitat Commented Jun 25, 2017 at 19:28
- I had tried that one already but it doesn't do anything for me. – Berry Blue Commented Jun 25, 2017 at 20:52
- Have you taken a look in asset.mtl ? Maybe it is set in there somewhere – 2pha Commented Jun 26, 2017 at 1:56
- 1 can you post an image of what you are rendering? – gaitat Commented Jun 26, 2017 at 12:47
- 1 Does the shading look "flat" or "faceted"? Better if you share a screenshot. – Ali Hammoud Commented Jun 27, 2017 at 8:14
2 Answers
Reset to default 10It could be one of two things that I can think of right now.
It could be that the material is set to FlatShading. In this case just somehow retrieve the object and use object.material.shading = THREE.SmoothShading; to fix.
If that doesn't change it, it's possible that the object contains per-vertex-normals (meaning that every vertex of every triangle has a normal attached to it) and that all normals for each triangle point in the same direction. This is something that should better be solved in the 3d-editing process, but you can also re-pute the normals in three.js:
object.geometry.puteVertexNormals(true);
This should [1] repute the normals for smooth surfaces. However, it will only work for regular Geometries and Indexed BufferGeometries (or, to put it the other way around: it won't work if the geometry doesn't have information about vertices being reused for adjacent faces)
[1]: I didn't test it myself and just go after what I just read in the code
You may need to smooth geometry as follows:
geometry = BufferGeometryUtils.mergeVertices(geometry, 0.1);
geometry.puteVertexNormals(true);