Smooth polygons of Three.js model

Question

I have something like this:

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

    console.log( item, loaded, total );

};

var texture = new THREE.Texture();

var loader = new THREE.ImageLoader( manager );
loader.load( 'obj/'+model+'.jpg', function ( image ) {

    texture.anisotropy = anis;
    texture.image = image;
    texture.needsUpdate = true;

} );

// model

var loader = new THREE.OBJLoader( manager );
loader.load( 'obj/'+model+'.obj', function ( object ) {


    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material.map = texture;
            if(reflex){
                child.material.envMap = reflection;
                child.material.shading = THREE.SmoothShading;
                child.material.reflectivity = reflex;
            }

        }

    } );

    object.scale.set(10,10,10);

    object.position.y = pos;
    object.position.z = 0;
    object.position.x = 0;

    object.name = "model";
    scene.add( object );
} );

It works well, but ... all the polygons on the model are visible in this way ...

I would like to smooth things out ... so I read here that I could smooth them like this:

// First we want to clone our original geometry.
// Just in case we want to get the low poly version back.
var smooth = THREE.GeometryUtils.clone( geometry );

// Next, we need to merge vertices to clean up any unwanted vertex. 
smooth.mergeVertices();

// Create a new instance of the modifier and pass the number of divisions.
var modifier = new THREE.SubdivisionModifier(divisions);

// Apply the modifier to our cloned geometry.
modifier.modify( smooth );

// Finally, add our new detailed geometry to a mesh object and add it to our scene.
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { color: 0x222222 } ) );
scene.add( mesh );

But ... I have no idea where I can get this geometry object ... can anyone help me?

Answer 1

It looks like you need to smooth out the normals of the vertices. You can do it with

mesh.geometry.computeVertexNormals();

Call this function for each child mesh of your object (inside your move function).

, , . , ,

mesh.geometry.mergeVertices();

three.js r.67