使用 Three.js 启用平滑着色答案

【问题标题】：Enable smooth shading with Three.js使用 Three.js 启用平滑着色
【发布时间】：2017-06-29 04:32:22
【问题描述】：

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

编辑：我使用基于接受的答案解决我的问题的解决方案更新了我的代码。

【问题讨论】：

最有可能：stackoverflow.com/questions/29202480/…
我已经尝试过那个，但它对我没有任何作用。
你看过asset.mtl吗？也许它被设置在某个地方
你能贴一张你正在渲染的图片吗？
阴影看起来“平坦”还是“多面”？如果您分享屏幕截图会更好。

标签： javascript three.js

【解决方案1】：

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

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

如果这不改变它，那么对象可能包含每个顶点法线（意味着每个三角形的每个顶点都有一条法线连接到它）并且每个三角形的所有法线都指向相同的方向。这是在3d编辑过程中应该更好解决的问题，但是您也可以在three.js中重新计算法线：

object.geometry.computeVertexNormals(true);

这应该[1]重新计算光滑表面的法线。然而，它只适用于常规几何和索引缓冲区几何（或者，反过来说：如果几何没有关于顶点被相邻面重用的信息，它就不起作用）

[1]：我自己没有测试它，只是按照我刚刚在代码中阅读的内容进行操作

【讨论】：