How to create a wire-frame 3D cube in a-frame?

Question

I am struggling with creating a wire-frame for a box primitive. Tried color, opacity and transparent attributes but none seems to work. Here is the code -

<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1" position="0 1 0" material="color: #0000FF; opacity: 0.5;" rotation="0 0 120"></a-entity>

Need to render something like this -

Answer 1

You'll want to check out the THREE.Material docs a bit for this one, as A-Frame can't expose every option. Here's an example component, using the wireframe option:

 AFRAME.registerComponent('wireframe', {
   dependencies: ['material'],
   init: function () {
     this.el.components.material.material.wireframe = true;
   }
 });

---

 <a-entity geometry="primitive: box" material="color: blue" wireframe></a-entity>

Answer 2

In A-Frame 0.9.0 you can define wireframe: true as a property of the standard material, for example like this:

<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"
          position="0 1 0"
          material="color: #0000FF; opacity: 0.5; wireframe: true"
          rotation="0 0 120">
</a-entity>

Maybe you'll get some more wires than you need (at least in the renderings I get, there are wires for some diagonals, not only for edges), but maybe is good enough and dead simple.