@lucky-boy/lottery-mars

EN: Lottery Mars is a Three.js powered 3D lottery scene that works with the shared lottery-ui controls.
CN: Lottery Mars 基于 Three.js 构建，并与 lottery-ui 控件协同工作的 3D 抽奖场景。

Features · 特性

• EN: Animated planet core with particle orbits and winner spotlight transitions. / CN: 动态星球核心与粒子环绕效果，支持获奖者聚焦。
• EN: Background image overlay with adjustable opacity for brand storytelling. / CN: 支持背景图与透明遮罩，便于呈现品牌视觉。
• EN: Media recording hooks and keyboard shortcuts inherited from lottery-ui. / CN: 继承 lottery-ui 的录屏能力与快捷键控制。

Installation · 安装

pnpm add @lucky-boy/lottery-mars
# peer deps
pnpm add three react react-dom

Usage · 使用示例

import { PlanetStar } from "@lucky-boy/lottery-mars";
import type { PlanetStarConfig, User } from "@lucky-boy/lottery-mars";

const users: User[] = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const config: Partial<PlanetStarConfig> = {
  text: {
    title: "Mars Lottery",
    subtitle: "火星特别奖"
  },
  backgroundImageUrl: "/assets/mars-bg.png",
  radius: 28
};

export function LotteryMarsDemo() {
  return <PlanetStar users={users} config={config} />;
}

Configuration Highlights · 关键配置

| Field | Description | | -------------------------- | --------------------------------------------------------------------------------------- | | radius | EN: Planet radius controlling card orbit distance. / CN: 星球半径，决定卡片运行距离。 | | cardWidth / cardHeight | EN: Card billboard size. / CN: 卡片牌面尺寸。 | | particleSpeedMax | EN: Maximum particle drift speed. / CN: 粒子漂移的最大速度。 | | backgroundImageUrl | EN: Background image path rendered beneath the canvas. / CN: 在画布下绘制的背景图地址。 |

Development · 本地开发

pnpm install
pnpm run build

License · 许可

MIT