Tutoriel : Créer un piano dans WebXR à l’aide de Babylon.js

La construction d’un piano dans le monde réel nécessite beaucoup de temps, de compétences et de matériaux. Qu’en est-il d’en créer un pour le monde VR/AR ?

Dans cette série de tutoriels, vous allez apprendre à utiliser Babylon.js pour créer une application web Mixed Reality qui contient un piano debout de 88 touches fonctionnel dans le monde virtuel. Dans l’application terminée, vous pouvez vous téléporter sur le piano et jouer les touches à l’aide de vos contrôleurs de réalité mixte.

Dans cette série de tutoriels, vous allez apprendre à :

Créer, positionner et fusionner des maillages pour créer un clavier de piano
Importer un modèle Babylon.js d’un cadre de piano debout
Ajouter des interactions de pointeur à chaque touche de piano
Activer la prise en charge de la téléportation et des multipoints dans WebXR

Configuration requise

Un ordinateur connecté à Internet
Connaissances javascript de base
WebXR Javascript Hello World Tutoriel
Navigateur pris en charge par WebXR, par exemple Microsoft Edge
Babylon.js 4.2 ou version ultérieure
N’importe quel casque vr ou simulateur de Windows Mixed Reality
Facultatif : Windows 10 Creator Update si vous souhaitez utiliser un simulateur de Windows Mixed Reality

Prise en main

Commençons par configurer la page web HTML qui contiendra la scène Babylon.js.

Créez un dossier nommé babylonjs-piano-tutorial et ouvrez-le dans Visual Studio Code.

Remarque

Bien que vous puissiez utiliser n’importe quel éditeur de code pour suivre la procédure, nous allons utiliser Visual Studio Code tout au long de ce tutoriel pour plus de commodité.

Dans le dossier, créez un fichier nommé index.html et insérez le modèle ci-dessous dans le fichier :

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas"); 
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

Si vous avez besoin d’explications supplémentaires sur le contenu de ce modèle, consultez le didacticiel Hello World, qui est un prérequis de ce didacticiel.

Si vous essayez d’ouvrir ce fichier dans un navigateur, la console affiche une erreur indiquant que la createScene() fonction est introuvable. Nous allons résoudre cette erreur en implémentant la fonction createScene() dans la section suivante.

Configurer la scène

Dans le même dossier que index.html, créez un autre fichier nommé scene.js. Nous allons stocker tout le code javascript lié à la configuration de la scène et à la création du piano dans ce fichier.
Ajoutons la createScene() fonction dans scene.js:
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);
    return scene;
}
```
Notez que nous créons createScene() une fonction asynchrone. Restez à l’écoute pour savoir pourquoi.
Ensuite, nous aurons besoin d’une lumière et d’une caméra pour rendre la scène visible pour nous. Mettez à jour la createScene() fonction :
```
const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    return scene;
}
```
Ici, nous avons créé un ArcRotateCamera, qui pointe presque complètement vers le bas et cible le point d’origine de l’espace. La lumière que nous avons créée est un HemisphericLight qui pointe vers le ciel et est utile pour simuler un espace ambiant. Nous avons aussi un peu grisé la lumière en diminuant son intensité.

Si vous avez besoin d’un rappel sur la création d’une caméra et d’une lumière, revenez à la section Préparer la scène de la série de didacticiels Hello World avant de passer à l’étape suivante.
Enfin, étant donné que nous développons pour une plateforme WebXR, nous devons activer l’expérience XR dans la scène en insérant la ligne suivante avant return scene;:
```
const xrHelper = await scene.createDefaultXRExperienceAsync();
```
En javascript, pour pouvoir utiliser la await mot clé sur une fonction au sein d’une async fonction, la fonction parente doit également être async, ce qui explique pourquoi nous avons défini createScene la fonction comme asynchrone précédemment. Plus loin dans cette série de tutoriels, nous allons l’utiliser xrHelper pour activer et configurer différentes fonctionnalités WebXR prises en charge par Babylon.js.

Le scene.js terminé doit ressembler à ceci :

const createScene = async function(engine) {
    const scene = new BABYLON.Scene(engine);

    const alpha =  3*Math.PI/2;
    const beta = Math.PI/50;
    const radius = 220;
    const target = new BABYLON.Vector3(0, 0, 0);

    const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;

    const xrHelper = await scene.createDefaultXRExperienceAsync();

    return scene;
}

Maintenant que nous avons une fonction opérationnelle createScene() , nous allons index.htmlcharger le fichier scene.js en tant que script afin que la createScene() fonction soit reconnue dans index.html. Ajoutez cette ligne de code dans la <header> section du fichier html :

<html>
    <head>
        <title>Piano in BabylonJS</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="scene.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script type="text/javascript">
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true); 

            createScene(engine).then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });

            // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {
                engine.resize();
            });
        </script>
    </body>
</html>

Ouvrez index.html dans votre navigateur, et vous constaterez que le message d’erreur que nous avons vu précédemment n’est plus présent et que nous avons une scène Babylon.js vide dans la page.

Étapes suivantes

Tutoriel suivant : Créer un modèle de piano 3D

Rétroaction

Cette page vous a-t-elle été utile ?

Last updated on 2025-12-03