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...

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?

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...

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?

• javascript
• three.js

1 Answer 1

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

mesh.geometry.puteVertexNormals();

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 pute vertex normals, call

mesh.geometry.mergeVertices();

three.js r.67