梦想
一个用于反应的花瓶生物雕塑工作室: 印章和涂抹雕塑, 涂漆, 用预先制作的 骨架和标记,并使其成为正常的3D或像素艺术. 在网络工人内部使用Rust/WASM进行计量; 3D视图为Tree.j. 创建保存在浏览器(IndexedDB)中,可以同步到一个GitHub或GitLab寄存器.
现场演示 : https://dreamy-poc-c89175.gitlab.io (英语)
安装
npm install @felbrasil/dreamy react react-dom three
react, (中文(简体) ), react-dom (19个)和 three 是同伴的依赖关系。 没有其他可配置的:工人和
它的WASM在包件中被内置,因此Vite,Next.js(webpack或Turbopack)和其他捆绑机一样工作.
用整个工作室
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 |
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);
烤丝
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) :
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的浏览器. 只有客户端(没有服务器渲染工作室).
许可证
麻省理工学院