Three.js modèle polygones lisses

Question

j'ai eu quelque chose comme ceci:

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

fonctionne très bien, mais ... tous les polygones sur le modèle sont visibles de cette façon ...

I voudrais lisser les choses ... alors je lis here , que je pourrais les lisser comme ça:

// 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); 

Mais ... je n'ai aucune idée d'où j'obtiendrais cet objet géométrique ... quelqu'un pourrait-il m'aider?

Answer 1

Il semble que vous ayez besoin de lisser vos normales de sommet. Vous pouvez le faire avec

mesh.geometry.computeVertexNormals(); 

Appelez cette fonction pour chaque maillage enfant de votre objet (à l'intérieur de votre fonction traverse).

Si cela ne fonctionne pas, le problème est que les faces adjacentes de votre modèle ne partagent pas les sommets. Dans ce cas, avant de calculer Normales vertex, appelez

mesh.geometry.mergeVertices(); 

Three.js R.67