CODEWITHSUNDEEP
javascriptthree.js
Flash Thunder
Flash Thunder

Reputation: 12036

Three.js model smooth polygons

I got 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 );
} );

Works fine, but... all polygons on model are visible this way...

enter image description here

I would like to smooth things up... so I read here , that I could smooth them up like that:

// 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 do I get that geometry object... could anybody help me out?

Upvotes: 5

Views: 14932

Answers (1)

WestLangley
WestLangley

Reputation: 104813

It appears that you need to smooth your vertex normals. You can do that with

mesh.geometry.computeVertexNormals();

Call that function for each child mesh of your object (inside your traverse function).

If that doesn't work, then the problem is that adjacent faces on your model are not sharing vertices. In that case, before you compute vertex normals, call

mesh.geometry.mergeVertices();

three.js r.67

Upvotes: 12

Related Questions