javascript - Three.JS wireframe material - all polygons vs. just edges

Question

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):

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

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).

Answer 1

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