55

I'm using ThreeJS in a project and noticed that older versions render wireframes differently than newer versions, and I can't figure out how to revert (which I'd prefer).

This fiddle using release 54 renders only the exterior edges of the object drawn with a wireframe material: http://jsfiddle.net/ksRyQ/ or as pictured here in case this is platform specific (I'm on mac chrome):

enter image description here

On the other hand, when I run the same code locally using the newer version r61 I see each polygon's edge, as in:

enter image description here

the code in both cases is simple:

material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
});

I'm sure I could make the cube out of lines or something, but I'd rather actually understand the issue.

Any clues? Is there a setting for this or something that can be tweaked? Secondarily, you'll note that right now that code is using the canvas renderer, although I plan to use the webGL renderer, but the same phenomenon is true with both (even though there are other differences).

WestLangley
  • 102,557
  • 10
  • 276
  • 276
jack_was_taken
  • 939
  • 1
  • 7
  • 17

1 Answers1

95

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.

EDIT: updated to three.js.r.82

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 12
    Just to elaborate, you see the diagonals because support for quad faces was dropped from Three.js, and so CubeGeometry and others are now implemented using triangles. – yaku Nov 23 '13 at 13:33
  • Got it, thanks Yaku, that definitely answers my basic question -- if I want something else I'll just have to draw it differently. – jack_was_taken Nov 23 '13 at 14:48
  • I'm on rev 71 and don't have EdgesGeometry or WireframeGeometry, what can I use instead? – shinzou Aug 28 '17 at 09:43
  • I saw the older edits to this answer, I'm getting `Only THREE.Mesh can be rendered by the Firefly renderer. Use THREE.Mesh to draw lines.`, so is there any way I can add lines of the shape that aren't diagonal? – shinzou Aug 28 '17 at 10:36
  • @kuhaku rev 71 is 2+ years old. Upgrade to the current version. Make a new post if you have questions. – WestLangley Aug 28 '17 at 15:59
  • 1
    It's not up to me, I'm on Autodesk Viewer and that's the version they use with it... – shinzou Aug 28 '17 at 16:10
  • 1
    How do you make this work with animated objects that have a changing mesh? – f1lt3r Sep 05 '18 at 01:17