本文へ移動

Fuda Cards札

画像やライブ3Dを入れるコレクション用のカード枠です。本物の厚み、縁、箔、山、傷み、バインダーを、2つのWebコンポーネントで使えます。

「札（ふだ）」は、カードや札を指す日本語です。 名前について（英語）

目次

リファレンス · カードの中のライブ3D

LiveCards型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

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 type { LiveCards } from "@johnmorrisdotca/fuda-cards/live-3d";

定義

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;
}

メンバー

名前型説明
add(card: HTMLElement, item: LiveItem<T>, options?: AddOptions): () => void

Make a card live on focus: a <fuda-card> or any element with a size. Gives back the function that takes it off again.

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.

focusedHTMLElement | undefined

The card in focus, if any.

statsRendererStats | undefined

The shared renderer's own figures; undefined until it has been needed.

rendererSharedRenderer<T> | undefined

The shared renderer; undefined until it has been needed.

dispose(): void

Take every card off and let go of the renderer.

例

import { createLiveCards, type LiveCards } from "@johnmorrisdotca/fuda-cards/live-3d";

const live: LiveCards = createLiveCards({ load: () => import("three") });
live.blur();
live.dispose();

ソースを見るGitHub で編集@johnmorrisdotca/fuda-cards 0.11.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。