three.js所模型平滑多邊形

Question

我得到了這樣的事情：

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

工作正常，但......對模型中的所有多邊形都可見這樣...

我想平滑事情...所以我讀here ，我可以這樣平滑他們：

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

但是......我不知道我在哪裏得到那個幾何對象......有人能幫我嗎？

Answer 1

看來你需要平滑你的頂點法線。您可以使用

mesh.geometry.computeVertexNormals(); 

爲您的對象的每個子網格（在遍歷函數內）調用該函數。

如果這不起作用，那麼問題是模型上的相鄰面不共享頂點。在這種情況下，你計算頂點的法線之前，請撥打

mesh.geometry.mergeVertices(); 

three.js所r.67