@brewsite/screens

3D screen, media screen, and image panel elements for BrewSite scenes.

Installation

pnpm add @brewsite/screens @brewsite/core react react-dom three

Setup

Add screensPlugin() to your SceneEngine plugins:

import { SceneEngine } from '@brewsite/core/player';
import { screensPlugin } from '@brewsite/screens';

<SceneEngine plugins={[screensPlugin()]} getFrame={() => <MyScene />}>
  {/* ... */}
</SceneEngine>

Elements

Screen

import { Screen } from '@brewsite/screens';

<Screen id="demo-screen" width={1.6} height={0.9} bezel="rounded" />

MediaScreen

import { MediaScreen } from '@brewsite/screens';

<MediaScreen id="video" width={1.6} height={0.9} source="webcam" />

ImagePanel

import { ImagePanel } from '@brewsite/screens';

<ImagePanel id="hero-image" src="/images/hero.png" width={2} height={1.2} bezel="glass" />

API

See the full documentation for complete API reference.