Tutoriel : Créez votre première application WebXR avec Babylon.js

  • Article

Ce didacticiel vous montrera comment créer une application Azure Mixed Reality de base à l'aide de Babylon.js et de Visual Studio Code. L’application que vous allez développer vous permettra de créer un cube, de le faire pivoter pour en faire apparaître les autres faces et d’ajouter des interactions. Dans ce tutoriel, vous allez apprendre à :

  • Configurer un environnement de développement
  • L'API Babylon.js pour créer des éléments 3D de base
  • Créer une page web
  • Interagir avec des éléments 3D
  • Exécuter l’application dans un simulateur Windows Mixed Reality

Prérequis

Prise en main

pour créer ce projet à partir de zéro, commencez par un projet Visual Studio Code (VSCode).

Remarque

L’utilisation de VSCode n’est pas obligatoire, mais nous l’utiliserons pour des raisons pratiques tout au long du didacticiel. Les développeurs JavaScript plus expérimentés peuvent utiliser n’importe quel autre éditeur de leur choix, même le très simple Bloc-notes.

  1. Téléchargez le fichier unique Babylon.js ou utilisez une version en ligne disponible sur le site Web officiel Babylon.js. Vous pouvez également cloner l'intégralité du projet Babylon.js depuis GitHub

  2. Créez un fichier vide et enregistrez-le en tant que page HTML, par exemple index.html

  3. Créez un balisage html de base et référencez le fichier javascript Babylon.js. Le code final est le suivant :

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. Ajoutez un élément HTML canvas dans le corps pour restituer le contenu de Babylon.js. Notez que la zone de dessin possède un attribut d’ID qui vous permet d’accéder plus tard à cet élément HTML à partir de JavaScript.

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. La zone de dessin occupe toute la page web. Cela finalise notre page web. À ce stade, la page web est prête. Vous pouvez l’ouvrir dans n’importe quel navigateur et vous assurer qu’aucune erreur ne s’affiche, bien qu’il n’y ait pas encore d’expérience immersive.

Étapes suivantes

Tutoriel suivant : 2. Préparer une scène