Scènes

ThreeSceneManager est la manière recommandée de gérer plusieurs scènes Three.js avec Envy.

Ce qu'il apporte

• des scènes nommées
• un World par scène
• un changement propre de scène active
• des mises à jour par scène ou pour la scène active

Exemple

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.

Accéder à une scène

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

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

Quand l'utiliser

Utilise ThreeSceneManager quand tu veux:

• une scène de menu et une scène de jeu
• une scène de chargement et une scène active
• des niveaux ou des états isolés les uns des autres

Utilise createThreeWorld(scene) quand tu n'as besoin que d'une seule scène.