Creación de un entorno de XR personalizado con TypeScript
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.