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 boxGeometry.
In the above example, we use boxGeometry, sphereGeometry, and tetrahedronGeometry (pyramid).
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).
Buffer shapes
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.