Anterior

Siguientes

Creación de un entorno de XR personalizado con TypeScript

Completado

Hemos configurado la escena, la experiencia de XR predeterminada y la física. Ahora vamos a crear los iconos de los personajes y las interacciones.

Para crear los iconos y las interacciones, usaremos la biblioteca babylonjs-gui. Usaremos GUI.GUI3DManager y GUI.CylinderPanel para administrar el grupo de iconos GUI.HolographicButton.

Importación de los paquetes

En primer lugar, cree un archivo denominado environment.ts. Importe los paquetes y la clase del jugador que ha configurado para asignar las propiedades del archivo 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";

Ahora, al compilar el proyecto, se importarán todos los paquetes necesarios, que estarán disponibles para que cree la experiencia de Mixed Reality.

Creación de la clase y el constructor

Cree la clase de entorno y las variables privadas que se asignarán en el constructor. Debe pasar la escena y el motor e importar los datos JSON a una matriz.

Sugerencia

Este módulo usa el código de inicio de GitHub. Si completó el módulo anterior de la ruta de aprendizaje inspirada en Space Jam: Nuevas leyendas, es posible que también tenga su propio archivo players.json. Puede optar por usarlo.

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

Ahora tiene un entorno con una escena, un motor para representarla y datos del archivo JSON. Es el momento de crear los iconos de los jugadores y hacerlos interactivos.

© 2021 Warner Bros. Ent. All Rights Reserved.

Continuar