Skip to the content

Fuda Cards札

Collectible card frames for images and live 3D: a true thickness, an edge, foil, stacks, wear and a binder, as two web components.

Fuda is the Japanese word 札 for a card or a tag. About the name

Contents

Reference · Live 3D in cards

LiveScenetype

A scene for a card: kazoku-ui's scene, with object, the thing that turns about its upright axis while the card is in focus.

Import it

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

Definition

interface LiveScene extends Scene3D {
    object?: {
        rotation: {
            y: number;
        };
    };
}

Members

NameTypeDescription
object (optional){ rotation: { y: number; }; } | undefined
sceneunknown
cameraunknown
update (optional)((dt: number, now: number) => boolean | void) | undefined

Called before each draw while the view is live. Return true while something is moving; the view is then drawn again next frame, else it rests.

resize (optional)((width: number, height: number) => void) | undefined

The view's size in CSS pixels changed (set the camera's aspect).

dispose (optional)(() => void) | undefined

Free what only this scene owns. Shared assets are freed by the cache.

Examples

import type { LiveScene } from "@johnmorrisdotca/fuda-cards/live-3d";
import { BoxGeometry, Mesh, MeshNormalMaterial, PerspectiveCamera, Scene } from "three";

const cube = new Mesh(new BoxGeometry(1, 1, 1), new MeshNormalMaterial());
const scene = new Scene().add(cube);
const live: LiveScene = { scene, camera: new PerspectiveCamera(40, 1, 0.1, 10), object: cube };
console.log(live.object === cube);

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/fuda-cards 0.11.0.