Fil d'Ariane
Mis à jour le jeudi 31 août 2017
  • 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Importez un objet et une scène

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Pour travailler sur des assets graphiques avec Babylon, il faut les transformer en format  .babylon. Babylon a rendu l'importation et le travail sur des meshes créés sur différents modélisateurs graphiques de plus en plus facile au fil du temps.

Nous allons passer en revue différents logiciels qui vous permettront de transférer vos créations directement dans Babylon :

  • 3DS Max

  • Blender

  • Cheetah

  • Unity

Transformer vos fichiers en .babylon

Toutes les méthodes que je vais vous présenter ici sont basées sur le même système : vous installez un plugin qui exporte ce que vous avez à l'écran pour Babylon. ;)

3DS Max 

Voici le lien pour télécharger l'exporteur de 3DS Max vers Babylon. Toute la marche à suivre est détaillé sur ce Git, nous allons donc passer rapidement les étapes.

  • Télécharger le fichier.

  • Débloquer le fichier téléchargé.

  • Décompressez le fichier dans le dossier  assemblies de 3DS Max (source de 3DSMax\bin\assemblies).

L’exporteur est maintenant disponible dans le menu en haut, normalement dans l'onglet tout à droite.

Blender

Voici le lien pour télécharger l'exporter de Blender vers Babylon.

  • Téléchargez le fichier.

  • Comme pour 3DSMax, débloquez le fichier.

  • Décompressez le fichier dans le dossier  addons de Blender (Blender\2.77\scripts\addons).

  • Démarrez Blender et accédez à File/User Preferences.

  • Dans l'onglet Add-ons, recherchez babylon.

  • Cochez la case à coté du fichier trouvé et enregistrez en appuyant sur Save User Settings.

La fenetre Add-ons de Blender
La fenêtre Add-ons de Blender

Vous pouvez exporter vos meshes depuis File/Export/Babylon.js.

Cheetah

Le lien pour télécharger l'exporteur de Cheetah vers Babylon.

  • Téléchargez le fichier.

  • Débloquez et décompressez le fichier.

  • Ajoutez le fichier JavaScript dans /Users/YOUR_USER/Library/Application Support/Cheetah3D/Scripts/Macro/.

Vous pouvez utiliser l'exporteur en allant dans Tools/Scripts/Macro/Babylon.

Unity

Le lien pour télécharger l'exporteur de Unity vers Babylon.

  • Téléchargez le fichier.

  • Copiez le fichier dans le dossier  assets de votre projet.

Vous pourrez accéder à l'exporteur depuis votre projet dans un menu BabylonJS nouvellement créé.

Utiliser les meshes transformés

Maintenant que vous avez votre fichier .babylon, vous pouvez l'importer dans votre scène. Si vous voulez vérifier avant cela si l'export de fichier a bien fonctionné, Babylon met à disposition ici un testeur de mesh où vous pourrez tout simplement envoyer ce que vous avez exporté et voir comment cela se comporte dans une scène toute prête. Merci Babylon ! ^^

Maintenant que vous avez vérifié que votre fichier a bien été importé, il est temps de l’utiliser dans votre scène ! Vous allez donc apprendre à connaître un nouvel ami :  SceneLoader !

SceneLoader, votre nouveau meilleur pote

Avec cet outil, nous allons pouvoir charger n'importe quel fichier d'extension  .babylon. Voyons comment importer un mesh.

BABYLON.SceneLoader.ImportMesh("", "assets/", "monfichier.babylon", scene, itWorks(meshes,particleSystems,skeletons));

Il y a beaucoup de paramètres !

Je vais vous décomposer tout ça.

  • Le premier paramètre détermine quel mesh chercher. On indique ici le nom (id) du mesh entré dans les logiciels de modélisation. Si le champ est vide (comme dans notre exemple), on importe tout ce qu'il y a dans la scène.

  • Le deuxième paramètre indique où se situe le mesh dans votre arborescence de fichiers.

  • Le troisième paramètre donne le nom du fichier exportée.

  • Le quatrième paramètre donne la scène Babylon créé dans le navigateur.

  • Le cinquième paramètre est la fonction de callback qui se déclenche les assets sont bien importés.

Le callback de réussite, on met quoi dedans ?

Maintenant que vos meshes sont dans la scène, vous pouvez faire ce que vous voulez avec. Pour aller chercher un mesh précis par le nom donné dans 3DSMax, Blender, Cheetah ou Unity, parcourez le tableau des meshes récupérés et vérifiez les noms.

BABYLON.SceneLoader.ImportMesh("", "assets/", "monfichier.babylon", scene, function (newMeshes) {
    
    // Explore tous les meshes disponibles et récupère le mesh nommé 'nameMesh'
    for (var y = 0; y < newMeshes.length; y++) {
        if (newMeshes[i].name === 'nameMesh') {
            
            var searchMesh = newMeshes[i];
            break;
        }
    };
    // Convertit le mesh récupéré pour qu'il soit rendu en FlatShading
    searchMesh.convertToFlatShadedMesh();
    
    // On rend invisible notre mesh qui servira de prototype
    searchMesh.isVisible = false;

    // On rend le prototype accessible n'importe où
    scene.searchMeshPrototype = searchMesh;

});

convertToFlatShadedMesh()‌ permet au mesh d'être rendu de la même façon que les objets de base dans Babylon. Vous pouvez essayer avec et sans cette ligne pour voir l'effet sur la scène !

  

Et voilà, vous avez importé des meshes ! Ce n'était pas si compliqué, et maintenant que nous avons vu tout cela, il est temps pour nous de passer à l'avant-dernier chapitre de cette partie : lier les joueurs entre eux ! Ça y est, on y arrive : après cela, notre jeu sera véritablement jouable ! Personnellement, je suis particulièrement impatient ! ^^ ‌‌‌

Exemple de certificat de réussite
Exemple de certificat de réussite