Three.js 计算顶点法线 [英] Three.js Calculating Vertex Normals

问题描述

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

I'm experimenting with one of the examples, namely the webgl_loader_obj.html to load an .obj file exported from blender into three.js

这可以正常工作并完全按预期显示模型.现在我正在考虑使用 material.shading = THREE.SmoothShading.

This works and displays the model exactly as expected. Now i was looking at the use of material.shading = THREE.SmoothShading.

为此，模型需要具有顶点法线.从 Blender 导出的文件没有定义法线.

For this to work, the model needs to have vertex normals. the exported file from blender has no normals defined.

所以我考虑使用 computeVertexNormals 来计算所需的法线.然而这似乎并没有做任何事情，结果视图是未平滑的模型.

So i looked at using computeVertexNormals to calculate the required normals. however this doesn't appear to be doing anything, the resulting view is of the unsmoothed model.

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

further to this, as a test, i exported the same model, with normals. loading it straight in, it appeared smoothed.

如果我当时做了 computeFaceNormals() &computeVertexNormals() 会再次导致网格不平滑.

If i then did computeFaceNormals() & computeVertexNormals() it would result in the unsmoothed mesh again.

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;


                    }

                } );

推荐答案

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

Geometry.computeVertexNormals() "smooths" the vertex-normals by computing each vertex-normal to be the average of the face-normals of all faces that share that vertex.

如果几何体的每个面都有唯一的顶点(即没有顶点与相邻面共享)，则 computeVertexNormals() 将导致每个面的顶点法线与面相同-normal，网格着色将出现多面.

If each face of your geometry has unique vertices (i.e., no vertices are shared with a neighboring face), then computeVertexNormals() will result in each face's vertex-normals being the same as the face-normal, and the mesh shading will appear faceted.

three.js r.71

three.js r.71

这篇关于Three.js 计算顶点法线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！