ThreeJS - Wireframe for mesh in object format - object

Question

I am trying to display the wireframe of an object file loaded with OBJLoader(). This is the part of the code I am using:
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 );
});
});
In the following picture it's the result I would like to get:
However, this is what I get with my code:
There are diagonals on each cell! Can anyone tell me what I should modify to obtain a result equivalent to the first picture ?
Thank you!

Answer 1

A wireframe helper normally visualizes the actual wireframe model of your object defined by its primitives. Quads are no primitive in WebGL. Only triangles, lines and points (see WebGL specification). Hence, there is also no wireframe helper in three.js that produces your intended visual result.

Answer 2

If you want to render a wireframe of a given geometry, you can now use this pattern:
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 will render all edges. EdgesGeometry will render the hard edges only.
Also see this related answer on how to render both a model and its wireframe.