ThreeJS-对象格式的网格线框

Question

我正在尝试显示加载了OBJLoader()的目标文件的线框。这是我正在使用的代码的一部分：

var loader = new THREE.OBJLoader();

loader.load( filePath, function ( object ) {

        object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ){

        var  geometry = child.geometry;

        materialMesh = child.material;

        mesh = new THREE.Mesh(geometry, materialMesh);

        var useWireFrame = true;
          if (useWireFrame) {
              mesh.traverse(function (child) {
                    if (child instanceof THREE.Mesh) 
                      {
                        child.material.wireframe = true;
                        hild.material.color = new THREE.Color( 0xff0000 );
                      }
                });
              }

          }// end if

           scene.add( object );
        });

    });

在下面的图片中，这是我想要得到的结果：

但是，这是我的代码所得到的：

每个单元格上都有对角线！谁能告诉我应该修改什么以获得与第一张图片相等的结果？

谢谢！

Answer 1

线框助手通常可视化由其基元定义的对象的实际线框模型。在WebGL中，四边形不是原始的。仅三角形，直线和点（请参见WebGL specification）。因此，three.js中也没有线框助手可以产生预期的视觉效果。

Answer 2

如果要渲染给定几何图形的线框，现在可以使用此模式：

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )
var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
var wireframe = new THREE.LineSegments( geo, mat );
scene.add( wireframe );

WireframeGeometry 将渲染所有边缘。 EdgesGeometry 将仅呈现硬边。

另请参阅this related answer，了解如何渲染模型及其线框。