Examples

Minimal entity

import { Component, World } from "envy";

const world = new World();
const entity = world.createEntity();

class NameComponent extends Component {
  value = "Player";
}

entity.addComponent(new NameComponent());

Three.js object sync

import { Scene, Mesh, BoxGeometry, MeshStandardMaterial } from "three";
import {
  Component,
  createThreeWorld,
  Object3DComponent,
  TransformComponent
} from "envy";

class HealthComponent extends Component {
  value = 100;
}

const scene = new Scene();
const world = createThreeWorld(scene);

const entity = world.createEntity();
const mesh = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshStandardMaterial({ color: "white" })
);

entity.addComponent(new Object3DComponent(mesh));
entity.addComponent(new TransformComponent()).position.set(2, 0, 0);
entity.addComponent(new HealthComponent());
world.step(1 / 60);

Multiple scenes

import { Mesh, BoxGeometry, MeshStandardMaterial } from "three";
import {
  Component,
  Object3DComponent,
  ThreeSceneManager,
  TransformComponent
} from "envy";

class HealthComponent extends Component {
  value = 100;
}

const scenes = new ThreeSceneManager();
const menu = scenes.createScene("menu");
const game = scenes.createScene("game");

const entity = game.world.createEntity();
const mesh = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshStandardMaterial({ color: "orange" })
);

entity.addComponent(new Object3DComponent(mesh));
entity.addComponent(new TransformComponent()).position.set(0, 1, 0);
entity.addComponent(new HealthComponent());

scenes.setActiveScene("game");
scenes.update(1 / 60);

Canvas manager

import { PerspectiveCamera } from "three";
import { ThreeCanvasManager, ThreeSceneManager } from "envy";

const canvas = new ThreeCanvasManager({
  width: 1280,
  height: 720,
  aspectRatio: 16 / 9,
  center: true
});

const scenes = new ThreeSceneManager();
const game = scenes.createScene("game");
const camera = new PerspectiveCamera(75, 16 / 9, 0.1, 1000);

canvas.render(game.scene, camera);