LiveCardstype
The live cards of a page: add a card, put one in focus, let go. Only the card in focus turns in 3D, on the page's one WebGL context; the others stay pictures.
Import it
import type { LiveCards } from "@johnmorrisdotca/fuda-cards/live-3d";Definition
interface LiveCards<T extends ThreeLike = ThreeLike> {
add(card: HTMLElement, item: LiveItem<T>, options?: AddOptions): () => void;
focus(card: HTMLElement): Promise<boolean>;
blur(): void;
readonly focused: HTMLElement | undefined;
readonly stats: RendererStats | undefined;
readonly renderer: SharedRenderer<T> | undefined;
dispose(): void;
}Members
| Name | Type | Description |
|---|---|---|
add | (card: HTMLElement, item: LiveItem<T>, options?: AddOptions): () => void | Make a card live on focus: a |
focus | (card: HTMLElement): Promise<boolean> | Put this card in focus: it takes the context, and the card that had it freezes to a picture at its last angle. False if it did not go live (another took it, reduced motion, no WebGL). |
blur | (): void | No card in focus: the live one freezes to a picture and nothing draws. |
focused | HTMLElement | undefined | The card in focus, if any. |
stats | RendererStats | undefined | The shared renderer's own figures; undefined until it has been needed. |
renderer | SharedRenderer<T> | undefined | The shared renderer; undefined until it has been needed. |
dispose | (): void | Take every card off and let go of the renderer. |
Examples
import { createLiveCards, type LiveCards } from "@johnmorrisdotca/fuda-cards/live-3d";
const live: LiveCards = createLiveCards({ load: () => import("three") });
live.blur();
live.dispose();