Three.js 计算顶点法线答案

【问题标题】：Three.js Calculating Vertex NormalsThree.js 计算顶点法线
【发布时间】：2015-05-25 23:37:36
【问题描述】：

我正在试验其中一个示例，即 webgl_loader_obj.html 将从搅拌机导出的 .obj 文件加载到 three.js 中

这可以完全按预期工作并显示模型。现在我正在研究 material.shading = THREE.SmoothShading 的用法。

为此，模型需要有顶点法线。从搅拌机导出的文件没有定义法线。

所以我研究了使用 computeVertexNormals 来计算所需的法线。但是这似乎没有做任何事情，结果视图是未平滑的模型。

除此之外，作为测试，我导出了具有法线的相同模型。直接加载它，它看起来很平滑。

如果我随后执行了 computeFaceNormals() 和 computeVertexNormals()，它将再次导致未平滑的网格。

var loader = new THREE.OBJLoader( manager );
            loader.load( 'test.obj', function ( object ) {

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {
                        child.material = new THREE.MeshLambertMaterial( { color: 0xff6600 });

                        child.geometry.computeFaceNormals();
                        child.geometry.computeVertexNormals();
                        child.material.shading = THREE.SmoothShading;


                    }

                } );

【问题讨论】：

你的问题是什么？
为什么网格不平滑着色

标签： three.js

【解决方案1】：

Geometry.computeVertexNormals() 通过将每个顶点法线计算为共享该顶点的所有面的面法线的平均值来“平滑”顶点法线。

如果几何体的每个面都有唯一的顶点（即，没有顶点与相邻面共享），那么computeVertexNormals() 将导致每个面的顶点法线与面法线相同，并且网格着色将显示为多面。

three.js r.71

【讨论】：