Three.jsでスムーズなシェーディングを実現

Question

Three.jsでMTLとOBJファイルを使用してテクスチャでオブジェクトをレンダリングしています。私のコードはここで動作しますが、私のモデルは平らに陰影を付けて表示されます。スムーズシェーディングを有効にするには？

var scene = new THREE.Scene(); 
var mtlLoader = new THREE.MTLLoader(); 
mtlLoader.setPath('assets/'); 
mtlLoader.setBaseUrl('assets/'); 
mtlLoader.load('asset.mtl', function(materials) { 

    materials.preload(); 

    var objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath('assets/'); 
    objLoader.load('asset.obj', function(object) { 

     // 
     // This solved my problem 
     // 
     object.traverse(function(child) { 
      if(child instanceof THREE.Mesh) 
      { 
       child.material.shading = THREE.SmoothShading; 
      } 
     }); 
     // 
     // 

     scene.add(object); 
    }); 
}); 

編集：私は受け入れ答えに基づいて私の問題を修正液で自分のコードを更新 。

Answer 1

これは私が今考えていることの2つのうちの1つになる可能性があります。

材料がFlatShadingに設定されている可能性があります。この場合、何らかの形でオブジェクトを取得し、修正するためにobject.material.shading = THREE.SmoothShading;を使用します。

オブジェクトが変更されない場合、オブジェクトには頂点ごとの法線が含まれている可能性があります（つまり、各三角形の各頂点には法線が添付されています） 。これは、より優れた3D編集過程で解決しなければならないものですが、あなたもthree.jsで法線を再計算することができます

object.geometry.computeVertexNormals(true); 

これは[1]は、滑らかな表面のための法線を再計算する必要があります。ただし、通常のジオメトリおよびインデックス付きバッファジオメトリでのみ機能します（または、ジオメトリに隣接する面に再利用される頂点に関する情報がない場合は機能しません）

[ 1]：私はそれを自分でテストしておらず、ちょうど私がコードで読んだことをちょうど守った。