Three.js计算顶点法线

Question

我正在尝试其中一个示例,即webgl_loader_obj.html,将从blender导出的.obj文件加载到three.js中

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

为此,模型需要具有顶点法线.来自blender的导出文件没有定义法线.

所以我看了使用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() 通过将每个顶点法线计算为共享该顶点的所有面的面法线的平均值来"平滑"顶点法线.

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

three.js r.71