Three.js计算顶点法线

时间:2015-03-23 02:33:19

标签: three.js

我正在尝试其中一个示例,即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;


                    }

                } );

1 个答案:

答案 0 :(得分:6)

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

如果几何体的每个面都有唯一的顶点(即,没有顶点与相邻面共享),则computeVertexNormals()将导致每个面的顶点法线与面相同 - 正常,网格阴影将显示为刻面。

three.js r.71