@mirage-engine/core

MirageEngine - Ecosystem

MirageEngine is managed as a monorepo.
Here are the packages currently available:

Package	Version	Description
mirage-engine		The core engine that mirrors HTML DOM to WebGL scene.
@mirage-engine/painter		A standalone text & style texture generator for Three.js.
@mirage-engine/core		The core of mirage-engine.

MirageEngine

An engine that mirrors HTML DOM elements to a WebGL scene in real-time.

MirageEngine directly mirrors HTML DOM elements to WebGL objects. It observes DOM mutations and synchronizes position, style, and content in real-time, allowing standard HTML elements to exist within a WebGL context.

Installation

npm install mirage-engine three

Usage

Use simple

import { Mirage } from "mirage-engine";

const target = document.querySelector("#target") as HTMLElement;

const mirage = new Mirage(target);

mirage.start();

Use option

import { Mirage } from "mirage-engine";

const target = document.querySelector("#target") as HTMLElement;
const container = document.querySelector("#container") as HTMLElement;

const mirage = new Mirage(target, {
  textQuality: "low", //default is "medium" (== 2) ("low" | "medium" | "high" | number;)
  mode: "duplicate", //default is "overaly" ("overlay" | "duplicate")
  container: container, //The container option is only available in "duplicate" mode.
});

mirage.start();

License | MIT dltldn333