Skip to main content

Canevas

ThreeCanvasManager centralise la configuration du canvas du renderer dans Envy.

Ce qu'il gère​

  • canvas creation
  • renderer creation
  • forced aspect ratio
  • fixed size or container-based size
  • centering styles

Exemple de base​

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

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);

Dimensionnement basé sur un conteneur​

const canvas = new ThreeCanvasManager({
  container: document.getElementById("app") ?? undefined,
  aspectRatio: 16 / 9,
  center: true
});

canvas.fitToContainer();

Usage recommandé​

Utilise ThreeCanvasManager quand tu veux qu'Envy prenne en charge la configuration du renderer au lieu de la faire manuellement dans le code de l'application.