CODEWITHSUNDEEP
aframewebvr
Tushar Arora
Tushar Arora

Reputation: 1146

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

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 -

enter image description here

Upvotes: 6

Views: 3325

Answers (3)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

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:

enter image description here

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

Upvotes: 0

jgbarah
jgbarah

Reputation: 7902

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.

Upvotes: 4

Don McCurdy
Don McCurdy

Reputation: 11970

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>

Upvotes: 7

Related Questions