Three.js 计算顶点法线

Question

我正在试验其中一个示例，即 webgl_loader_obj.html 将从 blender 导出的 .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;


                    }

                } );

Answer 1

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

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

three.js r.71

Three.js 计算顶点法线

Three.js Calculating Vertex Normals

three.js