Créer un environnement de réalité étendue personnalisé avec TypeScript

3 minutes

Nous avons configuré la scène, l’expérience de réalité étendue (XR) par défaut et la physique. Créons à présent les icônes et les interactions des personnages.

Pour créer les icônes et les interactions, nous allons utiliser la bibliothèque babylonjs-gui. Nous allons utiliser GUI.GUI3DManager et GUI.CylinderPanel pour gérer le groupe d’icônes GUI.HolographicButton.

Importer les packages

Commencez par créer un fichier appelé environment.ts. Importez les packages et la classe Player que vous avez configurés pour mapper les propriétés à partir du fichier JSON :

import {
    Scene,
    Engine,
    AssetsManager,
    Vector3,
    TransformNode,
    SceneLoader,
    Mesh
} from "babylonjs";

import { Player } from "./models/Player";
import * as GUI from "babylonjs-gui";
import 'babylonjs-loaders';
import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";

À présent, quand vous allez générer votre projet, tous les packages nécessaires seront importés et disponibles pour que vous puissiez créer votre expérience de réalité mixte.

Créer la classe et le constructeur

Créez ensuite la classe Environment et les variables privées à mapper dans le constructeur. Vous devez passer la scène et le moteur, puis importer les données JSON dans un tableau.

Conseil

Ce module utilise le code de démarrage sur GitHub. Si vous avez suivi le module précédent du parcours d’apprentissage inspiré de Space Jam : Nouvelle Ère, vous disposez peut-être également de votre propre fichier players.json. Vous pouvez choisir de l’utiliser.

export class Environment {
    private _scene: Scene;
    private _engine: Engine;
    private _players: Array<Player>;

    constructor(scene: Scene, engine: Engine) {
        this._scene = scene;
        this._engine = engine;

        //Import data from JSON
        this._players = require('./data/players.json');
    }
}

Vous disposez à présent d’un environnement avec une scène, d’un moteur permettant d’afficher la scène et de données provenant du fichier JSON. Il est temps de créer les icônes des joueurs et de les rendre cliquables !

Continuer

Importer les packages

Créer la classe et le constructeur

Commentaires