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 -

score 7 · Accepted Answer · answered Aug 09 '16 at 14:39

7

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>

answered Aug 09 '16 at 14:39

Don McCurdy

10,975
2
37
75

1

Just noting where you can place the JS, you can put the JS snippet before your scene or include it in the ``.... `...` – ngokevin Aug 09 '16 at 17:34
@ngokevin feel free to edit my answers if you want, too. – Don McCurdy Aug 17 '16 at 03:49

score 4 · Answer 2 · answered Oct 11 '19 at 15:09

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.

score -1 · Answer 3 · answered Jun 28 '22 at 09:26

Here's a component that will generate the wireframe without the diagonal edges:

AFRAME.registerComponent("ngon-wireframe", {

    schema: {
        color: { type: 'color', default: 'black'}
    },

    init() {

        const baseGeometry = this.el.getObject3D('mesh').geometry
        if (!baseGeometry) {
            console.warn("ngon-wireframe: no base geometry found")
        };

        const edges = new THREE.EdgesGeometry( baseGeometry );
        const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: this.data.color } ) );
        this.el.object3D.add( line );

        this.el.getObject3D('mesh').visible = false;
    }
})

Use it like this:

    <a-box id="box"
      position="0 0 -2"
      ngon-wireframe="color:black">
    </a-box>

Output looks like this:

Based on this THREE.js source: https://threejs.org/docs/#api/en/geometries/EdgesGeometry

I've now built this into a maintained A-Frame component (with a few extra features) here: https://diarmidmackenzie.github.io/aframe-examples/component-usage/polygon-wireframe.html — Diarmid Mackenzie, Jun 28 '22 at 13:19
Not sure why people are downvoting this when it's the only answer that actually delivers what the original question asked for (square faces, not triangular ones). If you must downvote this, please can you add a comment explaining why? — Diarmid Mackenzie, Jun 27 '23 at 19:46

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

3 Answers3