Anterior

Siguientes

Trabajo con mallas integradas y texturas de procedimientos

Completado

Cuando empiece a crear juegos y mundos virtuales, se dará cuenta de que necesita modelos 3D, pero es posible que no sepa cómo crearlos. Babylon.js tiene modelos de malla integrados y texturas de procedimientos que puede usar sin tener que realizar ningún modelado.

Sugerencia

Para ver un tutorial más detallado del código, recuerde que siempre puede hacer que CodeTour se ejecute en Visual Studio Code. Vuelva a consultar la unidad de configuración del entorno si no ha instalado la extensión.

Generación de un suelo de madera

Usaremos MeshBuilder para crear el suelo y WoodProceduralTexture para crear una textura semejante a la madera. Por último, agregaremos PhysicsImposter a gymFloor, que define la física de esta malla con parámetros que imitan el suelo.

Todo el código siguiente debe ir en la función createScene(), ya que forma parte de la escena que estamos creando. Justo debajo de la inicialización del entorno (const env = scene.createDefaultEnvironment();), agregue el código siguiente.

  // Create a floor in the scene and position it to the center
  var gymFloor = MeshBuilder.CreateGround("ground", { width: 60, height: 60 }, scene);
  gymFloor.position = new Vector3(0, -3.5, 0);

  // Create wood materials and texture in the scene
  var woodMaterial = new StandardMaterial("woodMaterial", scene);
  var woodTexture = new WoodProceduralTexture("text", 1024, scene);

  // Adjust the texture to look more realistic 
  woodTexture.ampScale = 80.0;

  // Apply the texture to the material
  woodMaterial.diffuseTexture = woodTexture;

  // Apply the material to the gym floor mesh object
  gymFloor.material = woodMaterial;

  // Add physics that simulates the ground
  gymFloor.physicsImpostor = new PhysicsImpostor(gymFloor, PhysicsImpostor.PlaneImpostor, { mass: 0, restitution: 1 }, scene);

Después de crear gymFloor, asegúrese de reemplazar la malla de suelo de la experiencia de XR predeterminada. Busque el código siguiente:

// Create the default XR experience
const xr = await scene.createDefaultXRExperienceAsync({
  floorMeshes: [env.ground],
});

Reemplace env.ground por gymFloor.

Si le interesa explorar más detalles para ajustar la experiencia de XR, puede obtener más información sobre las texturas de procedimientos.

Creación de un fondo PhotoDome

Puede crear el mundo que le rodea en un juego de muchas maneras. Lo haremos de una manera sencilla con la clase PhotoDome de Babylon.js. La clase PhotoDome toma una foto (preferiblemente de 360 grados) y la usa como textura para crear un material de fondo en forma de esfera invertida. Por lo tanto, del mismo modo que puede encapsular una esfera con una imagen para que parezca un balón de baloncesto, puede encapsular una forma invertida con una imagen de 360 grados para crear una escena de fondo sin necesidad de crear un modelo 3D.

El código siguiente crea una instancia de la clase PhotoDome, pasa la dirección URL de la imagen y establece el tamaño y la resolución. Este código debe ir después del código que acaba de escribir para crear el suelo de la pista en la función createScene().

  // Create PhotoDome with a .png image and add it to the scene
  var dome = new PhotoDome(
      "mydome",
      "https://sjanlassets.blob.core.windows.net/assets/Looney-Court.png",
      {
          resolution: 32,
          size: 100
      },
      scene
  );

Sugerencia

Puede probar otras imágenes con PhotoDome. No desaproveche la ocasión de crear una experiencia de XR única y personal.

Guarde los cambios. Si el proyecto todavía está en ejecución, la recarga activa volverá a cargar la escena. La escena debería tener un aspecto parecido al siguiente:

Ya tiene la escena. Ahora vamos a agregar los botones de los jugadores y las acciones.

© 2021 Warner Bros. Ent. All Rights Reserved.

Continuar