The geometry component provides a basic shape for an entity. The primitive
property defines the general shape. Geometric primitives, in computer graphics,
are irreducible basic shapes. A material component is commonly defined to
provide a appearance alongside the shape to create a complete mesh.
Every geometry type will have these properties:
Transform geometry into a BufferGeometry to reduce memory usage at the cost of being harder to manipulate.
A selector to an entity to merge the entity’s geometry to.
Name of a geometry (e.g., one of the geometries listed below). Determines the geometry type and what other properties are available.
Disable retrieving the shared geometry object from the cache.
Merging geometries reduces the number of draw calls, greatly improving
performance under certain circumstances. Merged geometries will inherit the
material of the target geometry. Thus, it’s useful when we have entities that
share the same material.
Once merged, we can no longer manipulate the individual geometry 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 circles are flat,
A-Frame will only render a single face of the circle if we don’t specify side:
double 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.
Start angle for first segment. Can be used to define a partial circle.
The central angle (in degrees). Defaults to 360, which makes for a complete circle.
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.
The cone geometry is a cylinder geometry that have different top and bottom radii.
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 we
need a double-sided material to render properly:
Number of segments along the circumference of the tube ends. A higher number means the tube will be more round.
Number of segments along the circumference of the tube face. A higher number means the tube will be more round.
How many times the geometry winds around its axis of rotational symmetry.
How many times the geometry winds around a circle in the interior of the torus.
The triangle geometry creates a flat two-dimensional triangle. Because triangles are flat,
A-Frame will render only a single face, which is the one with vertexA, vertexB, and
vertexC appear in counterclockwise order on the screen, unless we specify side: double on
the material component.
We can register our own geometries using AFRAME.registerGeometry and creating
an object that is an instance of THREE.Geometry. A-Frame
registers all built-in geometries using this API. Here is how A-Frame registers
the box geometry:
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 we need to create the geometry and set on
this.geometry through the init lifecycle method.
When a geometry component sets its primitive property to the custom geometry
name, we can set the properties of the custom geometry on the geometry
component. Say we registered a custom geometry: