使用Three.js启用平滑着色

时间:2017-06-25 18:43:24

标签: javascript three.js

我正在使用带有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);
    });
});

编辑: 我使用解决方案更新了我的代码,该解决方案根据接受的答案解决了我的问题。

1 个答案:

答案 0 :(得分:6)

这可能是我现在能想到的两件事之一。

可能是材料设置为FlatShading。在这种情况下,只是以某种方式检索对象并使用object.material.shading = THREE.SmoothShading;来修复。

如果不改变它,则对象可能包含每顶点法线(意味着每个三角形的每个顶点都附加法线),并且每个三角形的所有法线都指向相同的方向。这是最好在3d编辑过程中解决的问题,但您也可以在three.js中重新计算法线:

object.geometry.computeVertexNormals(true);

这应该 [1] 重新计算光滑曲面的法线。但是,它只适用于常规Geometries和Indexed BufferGeometries(或者,换句话说:如果几何体没有关于相邻面重用顶点的信息,它将无法工作)

[1]:我自己没有测试过,只是按照我刚刚在代码中阅读的内容进行测试