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

编辑： 我根据已接受的答案更新了我的代码，解决了我的问题。

- Berry Blue

---

最有可能：https://dev59.com/Y4jca4cB1Zd3GeqP4vsK - gaitat

我已经尝试过那个了，但对我没有任何作用。 - Berry Blue

你有查看 asset.mtl 吗？也许里面设置了一些东西。 - 2pha

你能发布一张你正在渲染的图片吗？ - gaitat

阴影看起来是“平的”还是“有棱角的”？如果您能分享一张截图会更好。 - Ali Hammoud

Answer 1

我能想到的有两种可能性。

第一种可能是材质被设置为FlatShading。在这种情况下，只需找到对象并使用object.material.shading = THREE.SmoothShading;进行修复。

如果这样做没有改变结果，可能是因为该对象包含每个三角形的每个顶点都附加了法线向量，并且每个三角形的所有法线指向同一个方向。这是在3D编辑过程中最好解决的问题，但您还可以在three.js中重新计算法线向量：

object.geometry.computeVertexNormals(true);

这应该重新计算平滑曲面的法线。但是，它只适用于正则几何体和索引缓冲区几何体（或者反过来说：如果几何体没有关于顶点被用于相邻面的信息，则不起作用）

[1]: 我自己没有测试过，只是按照我刚刚在代码中读到的去做

- Martin Schuhfuß

Answer 2

您可能需要按照以下方式平滑几何形状：

geometry = BufferGeometryUtils.mergeVertices(geometry, 0.1);
geometry.computeVertexNormals(true);

- Dimitrios Ververidis