Skip to main content

Scenes

ThreeSceneManager is the recommended way to manage multiple Three.js scenes with Envy.

What it gives you​

  • named scenes
  • one World per scene
  • a clean active-scene switch
  • per-scene or active-scene updates

Example​

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

const scenes = new ThreeSceneManager();

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

class MenuTitleComponent extends Component {
  label = "Main Menu";
}

menu.world.createEntity().addComponent(new MenuTitleComponent());

const player = game.world.createEntity();
player.addComponent(
  new Object3DComponent(
    new Mesh(
      new BoxGeometry(1, 1, 1),
      new MeshStandardMaterial({ color: "orange" })
    )
  )
);
player.addComponent(new TransformComponent()).position.set(0, 1, 0);

const startButton = document.createElement("button");
startButton.textContent = "Start game";
startButton.addEventListener("click", () => {
  scenes.setActiveScene("game");
});

document.body.append(startButton);

scenes.setActiveScene("menu");

function frame() {
  scenes.update(1 / 60);
  requestAnimationFrame(frame);
}

frame();

Tout ce qui est créé dans menu.world reste isolé, et le clic sur le bouton fait basculer l'application vers la scène game.

Accessing a scene​

const gameScene = scenes.getScene("game");

if (gameScene) {
  gameScene.world.step(1 / 60);
}

When to use it​

Use ThreeSceneManager when you want:

  • a menu scene and a gameplay scene
  • a loading scene and a live scene
  • different levels or states isolated from each other

Use createThreeWorld(scene) when you only need one scene.