The geometry component provides a basic shape for an entity. The general
geometry is defined by the primitive property. Geometric primitives, in
computer graphics, means an extremely basic shape. With the primitive defined,
additional properties are used to further define the geometry. A material
component is usually defined to provide a appearance alongside the
shape to create a complete mesh.
Base Properties
Every geometry type will have these properties:
Property
Description
Default Value
buffer
Transform geometry into a BufferGeometry to reduce memory usage at the cost of being harder to manipulate.
true
mergeTo
A selector to an entity to merge the entity’s geometry to.
None
primitive
Name of a geometry (e.g., one of the geometries listed below). Determines the geometry type and what other properties are available.
box
skipCache
Disable retrieving the shared geometry object from the cache.
false
mergeTo
Merging geometries reduces the number of draw calls, greatly improving
performance under certain circumstances. Geometries that are merged will
inherit the material of the target geometry. Thus, it’s useful when we have
entities that share the same material.
Once merged, the individual geometry can no longer be manipulated
independently.
For geometry merging to be able to work, we will have to turn off buffer and
turn on skipCache.
The circle geometry creates flat two-dimensional circles. These can be complete
circles or partial circles (like Pac-Man). Note that because it is flat, only a
single side of the circle will be rendered if “side: double” is not specified
on the material component.
Number of triangles to construct the circle, like pizza slices. A higher number of segments means the circle will be more round.
32
thetaStart
Start angle for first segment. Can be used to define a partial circle.
0
thetaLength
The central angle (in degrees). Defaults to 360, which makes for a complete circle.
360
thetaLength and thetaStart Properties
In degrees, thetaStart defines where to start a circle or arc and
thetaLength defines where a circle or arc ends. If we wanted to make a (
shape, we would start the circle halfway through and define the length as half
of a circle. We can do this with thetaStart: 180; thetaLength: 180. Or if we
wanted to make a ) shape, we can do thetaStart: 0; thetaLength: 180.
Useful cases might be to animating thetaStart to create a spinner effect or
animating thetaLength on a fuse-based cursor for visual feedback.
cone
The cone geometry is a cylinder geometry that have different top and bottom radii.
Whether the ends of the cone are open (true) or capped (false).
false
radiusBottom
Radius of the bottom end of the cone.
1
radiusTop
Radius of the top end of the cone.
1
segmentsRadial
Number of segmented faces around the circumference of the cone.
36
segmentsHeight
Number of rows of faces along the height of the cone.
18
thetaStart
Starting angle in degrees.
0
thetaLength
Central angle in degrees.
360
cylinder
The cylinder geometry creates cylinders in the traditional sense like a
Coca-Cola™ can, but it can also define shapes such as tubes and curved
surfaces.
We can create a basic cylinder using height and radius:
We can create a tube by making the cylinder open-ended, which removes the top
and bottom surfaces of the cylinder such that the inside is visible. Then a
double-sided material will be needed to render properly:
We can create a cured surfaces by specifying the arc via thetaLength such
that the cylinder doesn’t curve all the way around, making the cylinder
open-ended, and then making the material double-sided:
The plane geometry creates a flat surface. Because it is flat, only a single
side of the plane will be rendered unless side: double is specified on the
material component.
The ring geometry creates a flat ring, like a CD. Because it is flat,
only a single side of the ring will be rendered unless side: double is
specified on the material component.
Number of segments along the circumference of the tube ends. A higher number means the tube will be more round.
36
segmentsTubular
Number of segments along the circumference of the tube face. A higher number means the tube will be more round.
32
arc
Central angle.
360
torusKnot
The torus knot geometry creates a pretzel shape, the particular shape of which
is defined by a pair of coprime integers, p and q. If p and q are not
coprime the result will be a torus link:
Number of segments along the circumference of the tube ends. A higher number means the tube will be more round.
36
segmentsTubular
Number of segments along the circumference of the tube face. A higher number means the tube will be more round.
32
p
How many times the geometry winds around its axis of rotational symmetry.
2
q
How many times the geometry winds around a circle in the interior of the torus.
3
Register a Custom Geometry
We can register our own geometries using AFRAME.registerGeometry and creating
an object that is an instance of THREE.Geometry. All
built-in geometries in A-Frame are registered using this API.
this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
}
});
Like with registering components, we provide a name, a
schema that will expose the properties of the geometry, and
lifecycle methods. Then the geometry needs to be created and set on
this.geometry through the init and update lifecycle methods.
When a geometry component sets its primitive property to the custom geometry
name, the properties of the custom geometry can be set on the geometry
component. Say we registered a custom geometry: