CODEWITHSUNDEEP
aframe
Lea Verou
Lea Verou

Reputation: 23887

What's the easiest way to render a 2D shape in an A-Frame scene?

Say, a shape of a human outline.

Ideally it could be converted to 3d by extruding, but even if it has no depth, that's fine for my use case.

Upvotes: 2

Views: 1167

Answers (2)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

There are also a couple of pre-built A-Frame components you could use to help with extrusion.

https://github.com/JosePedroDias/aframe-extrude-and-lathe

https://github.com/luiguild/aframe-svg-extruder

You can find examples of usage in each of those repos.

Upvotes: 0

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

I think the easiest way would be taking a transparent png image (the human outline), and use it as a source for an a-plane

<a-plane material="src: img.png; transparent: true"></a-plane>

Glitch here.

....but if you want to create a geometry with a custom shape, which will be helpful for extrusion, then check this out:

Creating a simple shape with the underlying THREE.js

First you need an array of 2D points:

let points = [];
points.push(new THREE.Vector2(0, 0));
// and so on for as many as you want

Create a THREE.Shape object which vertices will be created from the array

var shape = new THREE.Shape(points);

Create a mesh with the shape geometry, and any material, and add it to the scene, or entity

var geometry = new THREE.ShapeGeometry(shape);
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});

var mesh = new THREE.Mesh(geometry, material);
entity.object3D.add(mesh);

More on:
1) THREE.Shape
2) THREE.ShapeGeometry
3) THREE.Mesh

Extrusion

Instead of the ShapeGeometry you can use the ExtrudeGeometry object:

var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});

Where the amount is basically the "thickness". More on Three.ExtrudeGeometry here.

Usage with AFRAME

I'd recommend creating an AFRAME custom component:

js

AFRAME.registerComponent('foo', {
    init: function() {
       // mesh creation
       this.el.object3D.add(mesh);
    }
})

HTML

<a-entity foo></a-entity>

2D shape here.
Extruded 2D shape here.
Three.js examples here. They are quite more complicated than my polygons :)

Upvotes: 3

Related Questions