ThreeJS - Wireframe for mesh in object format

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!

You have to draw quad instead of triangle as a primitive of a mesh to get that as wireframe which i think is not supported in ThreeJS. So i think its not possible to get the result that you want using wireframe. Instead you can try to use `GridHelper` on your mesh to get a similar effect. — Rasheduzzaman Sourov, Apr 01 '19 at 06:10

score 1 · Answer 1 · answered Apr 01 '19 at 09:51

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.

answered Apr 01 '19 at 09:51

Mugen87

28,829
4
27
50

Thank you for your answer, but what you see in the pictures are the same file objects. The one is the top is visualized by blender the second one by ThreeJS scene. So the primitives are not triangles! there should be a way to obtain the same visualization. – Sim81 Apr 02 '19 at 02:57
Are you aware that your Blender object is triangulated when you export it? – Mugen87 Apr 02 '19 at 08:35

score 1 · Answer 2 · answered Dec 25 '20 at 09:33

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.

ThreeJS - Wireframe for mesh in object format

2 Answers2