Three.JS wireframe material - all polygons vs. just edges
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).
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