# @felbrasil/dreamy 中文文档

规范地址：https://npmcn.com/package/%40felbrasil/dreamy/

版本：0\.15\.0
npm 元数据更新时间：2026-11-12T22:56:38.709Z
中文译文更新时间：2026-11-14T13:59:08.438Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40felbrasil/dreamy
原文对照：https://npmcn.com/package/%40felbrasil/dreamy/?lang=original
项目主页：https://dreamy-poc-c89175.gitlab.io/
源码仓库：https://gitlab.com/mvps1192434/dreamy-poc

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.2 MB，475 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^19\.0\.0，three \>=0\.180\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-19T22:35:35.313Z
- 最新版本发布：2026-11-12T22:56:38.374Z
- 近 30 天下载量：2555（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

Dreamy:为React(WASM mesher,Tree.js Viewport,被克特后卫所保存)制作的花瓶生物雕塑工作室.

## 安装

```sh
npm install @felbrasil/dreamy
```

也可以使用：`pnpm add @felbrasil/dreamy`、`yarn add @felbrasil/dreamy`、`bun add @felbrasil/dreamy`

## README

# 梦想

一个用于反应的花瓶生物雕塑工作室: 印章和涂抹雕塑, 涂漆, 用预先制作的 骨架和标记,并使其成为正常的3D或像素艺术. 在网络工人内部使用Rust/WASM进行计量; 3D视图为Tree.j. 创建保存在浏览器(IndexedDB)中,可以同步到一个GitHub或GitLab寄存器.

**现场演示 :** [https://dreamy-poc-c89175.gitlab.io (英语)](https://dreamy-poc-c89175.gitlab.io/)

## 安装

```bash
npm install @felbrasil/dreamy react react-dom three
```

`react`, (中文(简体) ), `react-dom` (19个)和 `three` 是同伴的依赖关系。 没有其他可配置的:工人和 它的WASM在包件中被内置,因此Vite,Next.js(webpack或Turbopack)和其他捆绑机一样工作.

## 用整个工作室

```tsx
import { DreamyStudio } from "@felbrasil/dreamy";
import "@felbrasil/dreamy/styles.css";

export function App() {
  return <DreamyStudio onReady={() => console.log("studio ready")} />;
}
```

工作室会填充页面(被固定,全取景口),因此使一页一出. `styles.css` 还装上工作室的 图标(Font Authority)和字体(Nunito),来自其CDN.

单位 **下一个.js** 您可以从服务器组件直接渲染:软件包条目是一个客户端模块. 导入 `styles.css` 在您的根布局中.

### 道具

| Prop | 默认 |  |
| --- | --- | --- |
| `database` | 此浏览器的索引DB | 创作图书馆的所在地(`LibraryDatabase`: 列表/ 已读/ 已写/ 删除/ 已写). |
| `storage` | `localStorage` | 用于视图偏好和 git 设置的密钥值存储 . |
| `gitSync` | `true` | 提供 Scenes → Git: 与一个 GitHub 或 GitLab 仓库同步库( ken 保存在其中) `storage`) (中文(简体) ). |
| `onReady` |  | 一旦mesher被装入后即被调用,创作开放,工作室也已经作画了. |

## 使用块

| 导入 | 什麽 |
| --- | --- |
| `@felbrasil/dreamy` | `DreamyStudio`,索引DB 库,持续、同步、首选项 |
| `@felbrasil/dreamy/core` | `createCreationApi`: 事件源创建模式、命令、撤销、预制 |
| `@felbrasil/dreamy/viewport` | `createViewport({ evaluator })`: 三.js 渲染器和相互作用 |
| `@felbrasil/dreamy/evaluator` | `createEvaluator()`: WASM mesher in a Worker(英语:TypeScript fallback)中的WASM mesher(英语:TypeScript fallback) 互联网档案馆的存檔,存档日期2013-12-02 |
| `@felbrasil/dreamy/api` | 类型:模型、命令、事件和端口 |
| `@felbrasil/dreamy/bake` | `createSpriteBaker()`: 以调色板角色的形式创建的像素艺术图案, 没有工作室 UI |

```ts
import { createCreationApi } from "@felbrasil/dreamy/core";
import { createEvaluator } from "@felbrasil/dreamy/evaluator";
import { createViewport } from "@felbrasil/dreamy/viewport";

const api = createCreationApi({ ids, clock, log });
const viewport = createViewport({ evaluator: createEvaluator() });
viewport.mount(hostElement, callbacks);
```

## 烤丝

```ts
import { createCreationApi } from "@felbrasil/dreamy/core";
import { createSpriteBaker, spriteColors } from "@felbrasil/dreamy/bake";

const api = createCreationApi({ ids, clock, log });
api.dispatch({ type: "GenerateCreature", payload: { seed: 42, chimera: false, variety: 0.7, target } });

const baker = createSpriteBaker();
const [front, back] = await baker.bake(api.creation(), [
  { view: { yaw: 15, pitch: 15 }, size: 256 },   // degrees around the creature's front
  { view: { yaw: 180, pitch: 30 }, size: 256 },  // its back, from above
  { view: { yaw: 15, pitch: 15 }, size: 64, dither: 0.2, normalStrength: 0.5 }, // less tone dither, flatter relief
]);
// front.roles: one palette role per pixel (0 transparent, 1 ink, 2–28 slot × tone); front.colors draws them,
// spriteColors(otherPalette) recolors them. front.anchor: the feet row and the silhouette's centre.
// front.bones: the skeleton (parent index, world position, sprite x / y, depth) for a bone or x-ray view.
```

只画出烤宝石的游戏导入光线 `@felbrasil/dreamy/sprite` 条目( 没有 WebGL、 mesher 或 React) :

```ts
import { decodeSpritePng, encodeSpritePng, spriteColors, spriteRgba } from "@felbrasil/dreamy/sprite";

const png = await encodeSpritePng(front);              // 8-bit indexed PNG: pixel = role, PNG palette = role colors
const { width, height, roles } = await decodeSpritePng(png);
const pixels = spriteRgba(roles, spriteColors(palette)); // ImageData pixels in any creature's colors
```

`GenerateCreature` 使用一个 `stage` (单位:千美元)`"chibi"`, (中文(简体) ), `"young"` 或者说 `"adult"`:同种是同一种生物 大头宝宝,在中间, 或者长大了.

面包师不需要反应 它使出屏幕,并在有WebGL 2的隐藏页面或无头浏览器中工作.

## 所需资源

一个带有WebGL 2,Web Workers and Web Assembly的浏览器. 只有客户端(没有服务器渲染工作室).

## 许可证

麻省理工学院

## 常见问题

### @felbrasil/dreamy 是什么？

Dreamy:为React\(WASM mesher,Tree\.js Viewport,被克特后卫所保存\)制作的花瓶生物雕塑工作室\.

### 如何安装 @felbrasil/dreamy？

在项目目录运行 npm install @felbrasil/dreamy，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、three（\>=0\.180\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @felbrasil/dreamy 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @felbrasil/dreamy 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @felbrasil/dreamy 可以商用吗？

@felbrasil/dreamy 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @felbrasil/dreamy 的下载量有多少？

根据 npm 官方下载统计，@felbrasil/dreamy 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,555 次，日均约 85 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @felbrasil/dreamy 还在维护吗？

最新版本 0\.15\.0 发布于 2026/11/13（1 天前）；至今共发布 20 个版本，其中过去 12 个月发布了 20 个；首次发布于 2026/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。