You can of course render much more than just cubes. Here’s a big list of the shapes that react-three-fiber/Three.js supports:
(There are actually a few more, see the full list here)
The syntax is
[shape name] plus
Geometry, so the Box element is
In the above example, we use
Props for shapes
All geometry takes an
args prop which is an array of values. What the values mean depends on the type of object: Box takes
[width, height, depth] and Sphere takes
[radius, widthSegments, heightSegments] (“segments” is like “resolution” for the geometry).
Most shapes also comes in two “flavors”, one “regular” and one “buffer” version (e.g.
<boxBufferGeometry />). In short, the buffer versions are more optimized for rendering, but the regular ones are easier to modify in code.