Box
Rectangular box / cube. Use for crates, walls, blocks, cubes.
▶ PreviewHow it works36 objects
Shapes for Three.js & React Three Fiber
Solid 3D shapes for any scene: primitives, polyhedra, icons and 3D text, each able to wear any material or turn into points and lines.
Meshes are the solid shapes of a 3D scene: the box, sphere and cylinder you block out a layout with, a set of graphic shapes like hearts, stars, gears and lightning bolts, and a word extruded into solid letters. Each one is a plain form that takes any material from the library, so the same sphere can be chrome, frosted glass or lava.
What's in the family
- Primitives: box, sphere, cylinder, cone, capsule, torus, ring, plane and point. Use them for floors, plinths, columns, pills and backdrops.
- Polyhedra: tetrahedron, octahedron, dodecahedron and icosahedron. Their Detail setting subdivides the faces, so a sharp crystal can round off toward a sphere. Good for gems, dice and faceted product stands.
- Graphic shapes: heart, star, sparkle, gear, droplet, shield, lightning, infinity, polygon, paw print and the four card suits. They are built from smooth outlines with a Curve detail setting, so they stay clean as icons and logo marks in 3D.
- Super Formula: one shape that becomes flowers, stars, blobs and shells, driven by Symmetry, Roundness, Twist 1 and Twist 2.
- 3d Text: a word or line extruded into a solid with bevelled edges, in the same fonts as the animated text looks.
Shape settings
Every mesh has its own measurements. A sphere has Radius, Segments and Rings; a cylinder has a Top radius and a Bottom radius, so setting one to zero gives a cone; a gear has Teeth, Root and Bore; a star has Points, Outer radius and Inner radius. 3d Text has the Text itself, Font, Size, Depth, Letter spacing and a Bevel you can switch off for flat, sharp-edged letters.
Solid, points or lines
A mesh does not have to be solid. Its display mode turns the same shape into points or lines:
- Points: Volume fills the shape with dots, Surface scatters them over its skin, Even spaces them at a set Spacing, Symmetric repeats them with a set Symmetry, and Vertices puts one dot on each corner. Count sets how many.
- Lines: Edges draws the creases sharper than a set Edge angle, Wireframe draws every triangle, Profile the outline, Contours slices the shape into stacked rings, and Plexus links nearby points into a network. Line weight sets the thickness.
This is how a plain torus becomes a dotted ring, or a sphere becomes a contour globe for a tech hero, without any other object.
Choosing a mesh
For product scenes, start with a plane or a cylinder as the floor and a box or capsule as the stand, then spend your time on materials and lights. For brand moments, the graphic shapes and 3d Text carry a logo mark or a word in the brand's own material. For abstract and generative work, Super Formula and the polyhedra in points or Plexus mode give a lot of shape from one object. Every mesh can carry object effects, so a heart can pop, a star can spin and a word can shatter on click.
All shapes
Click a card to play it liveCapsule
Cylinder with hemispherical caps. Use for pills, character bodies, rounded poles.
▶ PreviewHow it worksClub
Club mesh
▶ PreviewHow it worksCone
Pointed cone. Use for traffic cones, spires, ice-cream cones, witch hats.
▶ PreviewHow it worksCylinder
Cylinder (pipe / tube / column). Use for poles, columns, cans, pipes.
▶ PreviewHow it worksDiamond
Diamond mesh
▶ PreviewHow it worksDodecahedron
12-sided polyhedron with pentagonal faces. Use for d12 dice, faceted gemstones.
▶ PreviewHow it worksDroplet
Droplet mesh
▶ PreviewHow it worksGear
Gear shape mesh
▶ PreviewHow it worksHeart
simple heart mesh
▶ PreviewHow it worksIcosahedron
20-sided polyhedron. Use for d20 dice, geodesic forms, faceted gems.
▶ PreviewHow it worksInfinity
Infinity mesh
▶ PreviewHow it worksLightning
Lightning mesh
▶ PreviewHow it worksOctahedron
8-sided polyhedron (two pyramids back-to-back). Use for d8 dice, crystals, faceted diamonds.
▶ PreviewHow it worksPaw Print
Dog paw print
▶ PreviewHow it worksPlane
Flat 2D rectangle. Use for ground, floors, walls, screens, ceilings.
▶ PreviewHow it worksPoint
A rendered point (single vertex). Use for star markers, light positions, debug dots.
▶ PreviewHow it worksPolygon
dynamic polygon
▶ PreviewHow it worksRing
Flat ring (annulus). Use for halos, washers, planetary rings, dartboards.
▶ PreviewHow it worksShield
Shield mesh
▶ PreviewHow it worksSpade
Spade mesh
▶ PreviewHow it worksSparkle
Sparkle mesh
▶ PreviewHow it worksSphere
Round 3D sphere. Use for balls, planets, orbs, bubbles.
▶ PreviewHow it worksStar
star mesh
▶ PreviewHow it worksSuper Formula
Super formula mesh
▶ PreviewHow it worksTetrahedron
4-sided polyhedron (triangular pyramid). Use for d4 dice, simple pyramids, sharp spikes.
▶ PreviewHow it worksTorus
Donut shape — a ring with thickness. Use for donuts, rings, tubes-as-loops.
▶ PreviewHow it works3d Text
A word or line extruded into a solid with bevelled edges, from the same fonts as the text looks; takes any material. Use for logos, signs, titles and chunky labels.
▶ PreviewHow it worksOutline
A filled shape from a plan outline of [x, z] points (rounded by `curve`), flat or a thin slab with a bevel. Use for ponds, patios, paths, tabletops, floor plates.
▶ PreviewExtrude
A plan outline extruded to a height, with holes, bevel, twist and taper; upright for logos and signs. Use for walls, podiums, buildings, furniture blocks, logos.
▶ PreviewLathe
A [radius, y] profile revolved around the vertical axis, full or a slice, with caps. Use for vases, bowls, columns, lamps, bottles, domes.
▶ PreviewSweep
A circle or any profile swept along a 3D path of [x, y, z] points, rounded, scaled along the way, capped or closed. Use for pipes, railings, cables, rails, hoses, rings.
▶ PreviewSvg
An SVG path or uploaded .svg extruded into a solid with a bevel, holes by the fill rule, fitted to a width. Use for logos, icons, badges, cut-out signs.
▶ PreviewSuperellipsoid
A superellipsoid: a box-to-sphere family set by two exponents and three extents. Use for rounded boxes, pills, cushions, soft buttons, pebbles.
▶ PreviewTorus Knot
A (p, q) torus knot tube. Use for knot sculptures, abstract art, tangled rings.
▶ PreviewGeometry Script
Any geometry from a small JavaScript build(p, g) script using the geometry kit (solids, outlines, lathe, sweep, SVG, CSG union / subtract / intersect, noise) with its own parameter knobs. Use when no variant fits: a tower with cut windows, a chair, a rock, a mechanical part.
▶ PreviewCode and API
Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.
More object types
Grids
A grid overlay (cells and sections), typically on the ground plane.
24 objectsLights
A light source illuminating the scene. Choose the kind based on directionality and falloff.
10 objectsEnvironment effects
Environmental elements from the world
6 objectsGallery layouts
A set of pictures: frames arranged on a layout (tiles, circular, spiral, tunnel…), or a variant with its own motion and navigation.
23 objects