ts
import { Apple, Backdrop, Car, Card, Coin, ContactShadow, Ground, MoneyStack, Peach, StudioFloor, Trees } from "@apricot/assets";Ready-made objects drawn with code: no files to download, a draw call or two each. Every component also takes transform props (position, rotation, scale) and frees its object on unmount. Changing an option rebuilds the object.
Components#
Food#
| Component | Props (default) | Notes |
|---|---|---|
Apple |
size diameter (1), color skin ("#e8343a"), leaf (true) |
One mesh. userData.radius is set for <Pile> |
Peach |
size width (1), leaves (true), detail smoothness 0–1 (1) |
One mesh. Lower detail for many small or blurred copies |
Money#
| Component | Props (default) | Notes |
|---|---|---|
Coin |
radius (0.5), thickness (0.08), color ("#f2c14e") |
Lies flat: a cylinder along y. Rotate [Math.PI / 2, 0, 0] to face the camera |
MoneyStack |
bills (40), seed (1), width (2.4), depth (1.05), thickness per bill (0.022), band paper band, true or a colour (true), colors Partial<BanknoteColors> |
One draw call for the whole stack. Base at y = 0 |
BanknoteColors: { base, ink, highlight, paper }; defaults in DEFAULT_BANKNOTE_COLORS (#7cc47f, #3f8f46, #c8e6c9, #eef3e2).
Vehicles#
| Component | Props (default) | Notes |
|---|---|---|
Car |
color body ("#f24b3f"), glass windows ("#bfe3ff") |
Emoji-style toy car facing +z, wheels on y = 0, wheel nodes named for <Vehicle>. Sized for <Vehicle>'s defaults |
Product#
| Component | Props (default) | Notes |
|---|---|---|
Card |
finish CardFinish ("brushed-steel"), art engraving mask texture (null), chip (true) |
A payment card centred on the origin, front facing +z. Changing finish or art swaps materials without rebuilding |
Backdrop |
size [w, h] ([30, 30]), colors centre and edge (["#262a31", "#0e0f12"]), lines (true) |
An unlit studio wall facing +z. Glass needs something behind it to show; place it at [0, 0, -3] |
StudioFloor |
radius (8), colors centre and edge (["#30343b", "#0e0f12"]) |
A round, unlit floor at y = 0 that fades into the background. Match the edge colour to the scene's background |
CardFinish: "brushed-steel" | "chrome" | "gold" | "rose-gold" | "matte-black" | "glossy-paint" | "glass". Engraving looks: darker on bare metal, bright steel on matte black, white ink on paint, frosted on glass.
Scenery#
| Component | Props (default) | Notes |
|---|---|---|
Ground |
size (400), tile checker size (4), colors (["#a3d77f", "#97cf72"]) |
Flat checkered grass at y = 0 |
Trees |
count (120), area [minX, minZ, maxX, maxZ] ([-80, -80, 80, 80]), clearing free radius at the origin (8), scale size range ([0.8, 1.4]), seed (1) |
Round and pine trees: two draw calls for the forest. Here scale is the size range, not a transform |
ContactShadow |
width along x (1), length along z (1), opacity at the centre (0.35) |
A soft shadow blob on the ground. Put it inside the object's group (or <Vehicle>) so it follows. Cheaper than real shadows |
Factories#
Each component has a factory that returns a plain three.js object, for <Primitive>, <Instances object> or three.js code. Objects you create are yours: free them with disposeObject from @apricot/core.
| Factory | Returns |
|---|---|
createApple(options), createPeach(options), createCoin(options) |
THREE.Mesh |
createMoneyStack(options), createCar(options), createCard(options) |
THREE.Group |
createTrees(options), createGround(options), createContactShadow(options), createBackdrop(options), createStudioFloor(options) |
THREE.Object3D |
createSedan() |
A stylised sedan for testing kits: Italian part names (carrozzeria, cofano, bagagliaio, porta_ant_sx…, ruota_*) and materials (vernice, vetro, gomma, cerchio, luce…). sx is left (+x) |
createLaptop(), createLaptopAnimation() |
A closed laptop (parts base, keyboard, trackpad, lid; lid origin at the hinge) and its "LidOpen" clip |
createWheelGeometry(radius?), createRoundTreeGeometry(), createPineTreeGeometry() |
THREE.BufferGeometry |
createCardMaterials(finish, art?), setCardFinish(card, finish, art?) |
Card materials; switch a card's finish in place |
createBanknoteMaterial(aspect, colors?) |
The banknote shader material |
Constants#
| Constant | Value |
|---|---|
CARD_SIZE |
{ width: 3.37, height: 2.125, thickness: 0.032, radius: 0.125 } |
CARD_FINISHES |
Record<CardFinish, FinishSpec>: { label, preset, color, metalness, roughness, physical?, engraving } per finish |
CAR_DIMENSIONS |
{ length: 2.1, width: 1.1, wheelRadius: 0.3, wheelBase: 1.4, track: 1.04 } |
WHEEL_NAMES |
["wheel_fl", "wheel_fr", "wheel_rl", "wheel_rr"] |
SEDAN_DIMENSIONS |
{ length: 4.5, width: 1.8, height: 1.47, wheelRadius: 0.34 } |
LAPTOP_DIMENSIONS |
{ width: 3, depth: 2.1, base: 0.12, lid: 0.08 } |
DEFAULT_BANKNOTE_COLORS |
See Money above |
Related#
- card-tilt recipe, drive-joystick recipe, falling-pile recipe.
- Custom geometry: how these are built.