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

如果你想渲染一个给定几何图形的线框，你现在可以使用这个模式：

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，了解如何渲染模型及其线框。

Answer 2

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