Développer des Expériences Immersives : Web AR et Web VR avec A-Frame et Three.js
Développer des Expériences Immersives : Web AR et Web VR avec A-Frame et Three.js

Premiers Pas avec A-Frame : Création d'une Scène VR Basique

Introduction au Monde de la Réalité Virtuelle Web

Bienvenue dans ce module dédié au développement d'expériences immersives sur le web ! Aujourd'hui, nous allons faire nos premiers pas passionnants dans le monde de la réalité virtuelle (VR) directement dans votre navigateur. Le Web VR, ou réalité virtuelle web, ouvre des perspectives incroyables, permettant de créer et de partager des mondes virtuels accessibles à tous, sans installation complexe.

Pour cela, nous allons utiliser A-Frame, un framework web puissant et intuitif. A-Frame est construit sur Three.js, la célèbre bibliothèque JavaScript pour la 3D sur le web, mais il nous abstrait la complexité de cette dernière grâce à une syntaxe déclarative inspirée du HTML. Vous pourrez ainsi créer des scènes VR impressionnantes avec une facilité déconcertante.

Dans cette leçon, nous allons :

  • Découvrir ce qu'est A-Frame et pourquoi il est l'outil idéal pour débuter.
  • Mettre en place un environnement de développement minimaliste.
  • Créer votre toute première scène VR, composée d'objets 3D simples et d'un environnement basique.
  • Apprendre à manipuler les propriétés de ces objets pour les positionner, les colorer et les éclairer.

Préparez-vous à plonger dans la troisième dimension !

1. Prérequis

Avant de commencer, assurez-vous d'avoir :

  • Une compréhension de base du HTML (balises, attributs).
  • Un éditeur de texte (VS Code, Sublime Text, Atom, etc.).
  • Un navigateur web moderne (Chrome, Firefox, Edge) à jour, compatible WebGL.

2. Qu'est-ce que A-Frame ?

A-Frame est un framework web open source pour la création d'expériences VR. Il est développé par Mozilla et est rapidement devenu l'une des solutions les plus populaires pour le Web VR.

Voici ses principales caractéristiques :

  • Basé sur HTML : Vous construisez vos scènes VR en utilisant des balises HTML personnalisées. C'est intuitif et familier pour quiconque connaît déjà le développement web.
  • Basé sur des composants (Entity-Component-System) : A-Frame utilise un patron de conception Entity-Component-System (ECS). Une entité est un objet générique sur lequel on "attache" des composants (par exemple, un composant de géométrie pour le rendre visible, un composant de matériau pour sa couleur, un composant de position pour sa place dans l'espace).
  • Propulsé par Three.js : Sous le capot, A-Frame utilise Three.js pour le rendu 3D, mais il vous épargne la manipulation directe du DOM de Three.js, rendant le processus beaucoup plus simple.
  • Multiplateforme : Les scènes A-Frame fonctionnent sur desktop, mobile, et bien sûr, sur des casques de réalité virtuelle (Oculus Quest, HTC Vive, Google Cardboard, etc.) grâce à l'API WebXR.
  • Performance : Il est optimisé pour les performances, même sur des appareils mobiles.

En bref, A-Frame est la passerelle idéale entre le développement web traditionnel et la création d'expériences 3D et VR immersives.

3. Mise en place de l'environnement

La méthode la plus simple pour démarrer avec A-Frame est d'inclure la bibliothèque via un Content Delivery Network (CDN). Cela ne nécessite aucune installation de logiciels ou de dépendances sur votre machine, juste un fichier HTML !

  1. Créez un nouveau dossier pour votre projet, par exemple mon-projet-aframe.
  2. Dans ce dossier, créez un fichier nommé index.html.
  3. Ouvrez ce fichier index.html avec votre éditeur de texte.

4. Structure d'une Scène A-Frame

Toute scène A-Frame commence par une structure HTML classique, à laquelle on ajoute la balise <a-scene>. C'est le conteneur principal de votre monde virtuel.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Scène VR avec A-Frame</title>
    <!-- Importation de la bibliothèque A-Frame via CDN -->
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
    <!-- La balise a-scene contient toute notre expérience VR -->
    <a-scene>
        <!-- Ici, nous allons placer nos objets 3D -->
    </a-scene>
</body>
</html>
  • La balise <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> est cruciale : elle importe toutes les fonctionnalités d'A-Frame dans votre page.
  • <a-scene> est le cœur de votre application VR. A-Frame prend le contrôle de cette balise pour transformer son contenu en une expérience 3D navigable. Par défaut, <a-scene> inclut déjà une caméra et des contrôles basiques (souris/clavier sur desktop, gyroscope/touch sur mobile, contrôleurs VR sur casques), ce qui nous permet de nous déplacer dans la scène sans écrire une ligne de JavaScript !

Pour voir cette scène vide, enregistrez votre fichier index.html et ouvrez-le avec votre navigateur. Vous devriez voir un fond noir. Félicitations, vous avez créé votre premier environnement VR !

5. Première Scène VR : Le Monde Minimaliste

Maintenant, ajoutons quelques objets à notre scène. A-Frame fournit un ensemble de primitives : des formes 3D de base que nous pouvons ajouter directement en tant que balises HTML.

5.1 Les Entités et les Primitives

Chaque objet dans A-Frame est une entité. Une entité est un conteneur générique pour des composants. Les primitives sont des entités préconfigurées avec des composants de géométrie et de matériau par défaut, ce qui les rend très faciles à utiliser.

Voici quelques primitives courantes :

  • <a-box> : Un cube.
  • <a-sphere> : Une sphère.
  • <a-cylinder> : Un cylindre.
  • <a-plane> : Une surface plane (peut servir de sol).
  • <a-sky> : Un arrière-plan en forme de sphère, idéal pour colorer le ciel.

Chacune de ces primitives peut être personnalisée à l'aide d'attributs. Ces attributs sont en réalité des raccourcis pour les composants d'A-Frame. Par exemple, l'attribut position="X Y Z" définit la position de l'objet dans l'espace 3D.

L'espace 3D dans A-Frame fonctionne avec un système de coordonnées cartésiennes :

  • X : Horizontal (gauche/droite)
  • Y : Vertical (haut/bas)
  • Z : Profondeur (avant/arrière)

5.2 Ajout d'Entités Primitives à la Scène

Modifions notre fichier index.html pour y ajouter des formes et un ciel coloré.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Scène VR avec A-Frame</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <!-- 1. Un ciel (arrière-plan) -->
        <a-sky color="#87CEEB"></a-sky> <!-- Bleu ciel -->

        <!-- 2. Un sol (plan) -->
        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane> <!-- Vert pelouse -->

        <!-- 3. Un cube -->
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <!-- Cyan -->

        <!-- 4. Une sphère -->
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <!-- Rouge -->

        <!-- 5. Un cylindre -->
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <!-- Jaune -->

        <!-- Optionnel: Une caméra avec des contrôles par défaut.
             A-Frame en fournit une par défaut, mais la définir explicitement
             peut être utile pour la personnaliser plus tard.
        -->
        <a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
    </a-scene>
</body>
</html>

Explication du Code :

  • <a-sky color="#87CEEB"></a-sky> : Crée une sphère immense autour de la scène, agissant comme un arrière-plan. Nous lui donnons une couleur bleu clair (#87CEEB) pour simuler un ciel.
  • <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane> :
    • Crée un plan horizontal.
    • position="0 0 -4" : Le place à l'origine sur X et Y, et légèrement en avant sur Z.
    • rotation="-90 0 0" : Par défaut, les plans sont verticaux. Nous le faisons pivoter de -90 degrés sur l'axe X pour le rendre horizontal, comme un sol.
    • width="10" height="10" : Définit ses dimensions.
    • color="#7BC8A4" : Lui donne une couleur verte.
  • <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> :
    • Crée un cube.
    • position="-1 0.5 -3" : Le place à X=-1 (à gauche), Y=0.5 (légèrement au-dessus du sol car sa hauteur par défaut est 1, donc son centre est à Y=0.5), et Z=-3 (en avant).
    • rotation="0 45 0" : Le fait pivoter de 45 degrés sur l'axe Y (rotation horizontale), le rendant plus dynamique.
    • color="#4CC3D9" : Lui donne une couleur cyan.
  • <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> :
    • Crée une sphère.
    • position="0 1.25 -5" : Positionne la sphère au centre sur X, un peu plus haut sur Y, et plus loin sur Z.
    • radius="1.25" : Définit son rayon.
    • color="#EF2D5E" : Lui donne une couleur rouge.
  • <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> :
    • Crée un cylindre.
    • position="1 0.75 -3" : Le place à droite, avec une hauteur ajustée pour être au-dessus du sol.
    • radius="0.5" height="1.5" : Définit son rayon et sa hauteur.
    • color="#FFC65D" : Lui donne une couleur jaune.
  • <a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity> :
    • Bien qu'A-Frame fournisse une caméra par défaut, il est souvent utile de la définir explicitement.
    • camera : Attache le composant caméra à cette entité.
    • look-controls : Active les contrôles de rotation de la vue (souris pour desktop, gyroscope pour mobile).
    • wasd-controls : Active les contrôles de mouvement (touches W, A, S, D pour avancer, gauche, reculer, droite sur desktop).
    • position="0 1.6 0" : Place la caméra à une hauteur typique d'un œil humain.

Enregistrez le fichier et rafraîchissez votre navigateur. Vous devriez maintenant voir un petit monde 3D coloré ! Essayez d'utiliser la souris pour regarder autour de vous et les touches W, A, S, D pour vous déplacer.

6. Interaction et Personnalisation : Les Lumières

Jusqu'à présent, nos objets sont éclairés par une lumière ambiante par défaut, ce qui rend la scène un peu plate. Pour donner plus de réalisme et de profondeur, nous pouvons ajouter des sources de lumière explicites.

A-Frame propose la primitive <a-light> qui, combinée avec son composant light, permet de créer différents types d'éclairage :

  • type="ambient" : Une lumière diffuse qui illumine uniformément toute la scène.
  • type="directional" : Une lumière qui provient d'une direction donnée (comme le soleil).
  • type="point" : Une lumière qui émane d'un point dans toutes les directions (comme une ampoule).
  • type="spot" : Une lumière qui émane d'un point dans un cône directionnel (comme un projecteur).

Ajoutons une lumière directionnelle et une lumière ambiante à notre scène pour la rendre plus vivante.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma Première Scène VR avec A-Frame - Avec Lumières</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
</head>
<body>
    <a-scene>
        <!-- Un ciel (arrière-plan) -->
        <a-sky color="#87CEEB"></a-sky>

        <!-- Un sol (plan) -->
        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>

        <!-- Un cube -->
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>

        <!-- Une sphère -->
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

        <!-- Un cylindre -->
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

        <!-- Lumières -->
        <!-- Lumière ambiante : Illumine toute la scène doucement -->
        <a-light type="ambient" color="#FFF" intensity="0.5"></a-light>

        <!-- Lumière directionnelle : Simule une source de lumière comme le soleil -->
        <a-light type="directional" color="#FFF" intensity="0.8" position="-1 1 1"></a-light>

        <!-- Caméra avec contrôles -->
        <a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
    </a-scene>
</body>
</html>

Explication des Lumières :

  • <a-light type="ambient" color="#FFF" intensity="0.5"></a-light> :
    • Crée une lumière ambiante blanche (#FFF).
    • intensity="0.5" : Définit sa force. Une intensité de 0.5 signifie qu'elle contribue pour 50% à l'éclairage total. Cette lumière n'a pas de position car elle éclaire tout uniformément.
  • <a-light type="directional" color="#FFF" intensity="0.8" position="-1 1 1"></a-light> :
    • Crée une lumière directionnelle blanche.
    • intensity="0.8" : Définit sa force.
    • position="-1 1 1" : Définit la direction de la lumière. Ici, la lumière vient d'en haut à gauche et de l'avant par rapport au centre de la scène.

Enregistrez et rafraîchissez. Vous devriez remarquer que vos objets ont maintenant des ombres et des reflets, ce qui leur donne beaucoup plus de volume et de réalisme.

6.1 Quelques autres attributs utiles

Vous pouvez jouer avec d'autres attributs sur vos primitives :

  • width, height, depth : Pour ajuster les dimensions (sur a-box, a-plane, a-cylinder).
  • radius : Pour les sphères et cylindres.
  • material="flat: true" : Pour un éclairage uniforme sans ombres (utile pour certains éléments d'interface).
  • shadow : Le composant shadow permet aux objets de projeter et/ou de recevoir des ombres. Ajoutez shadow à vos objets et shadow="receive: true" à votre sol. N'oubliez pas d'activer shadow sur vos lumières directionnelles ou ponctuelles (<a-light shadow="true">).

7. Conseils pour le Développement et le Débogage

  • A-Frame Inspector : A-Frame est livré avec un outil d'inspection 3D très pratique, inspiré des outils de développement de navigateur. Appuyez sur Ctrl + Alt + I (ou Cmd + Option + I sur macOS) dans votre scène A-Frame pour l'ouvrir. Vous pourrez sélectionner les entités, modifier leurs propriétés en temps réel et voir l'impact immédiatement. C'est un outil indispensable !
  • Console du navigateur : Comme pour toute application web, la console du navigateur (F12) est votre alliée pour détecter les erreurs JavaScript.
  • Serveur local : Pour des projets plus complexes avec des assets (modèles 3D, textures), il est recommandé d'utiliser un serveur web local (par exemple, avec npx http-server ou l'extension Live Server de VS Code) plutôt que d'ouvrir le fichier HTML directement. Cela évite les problèmes de sécurité liés aux requêtes de fichiers locaux.

Conclusion

Félicitations ! Vous avez franchi la première étape majeure dans le développement d'expériences immersives avec A-Frame. Vous savez maintenant comment :

  • Initialiser une scène A-Frame.
  • Ajouter des formes primitives (boîtes, sphères, plans, cylindres) à votre monde virtuel.
  • Manipuler leurs positions, rotations et couleurs à l'aide d'attributs.
  • Éclairer votre scène avec différentes sources de lumière pour créer une ambiance plus réaliste.
  • Naviguer dans votre scène avec les contrôles par défaut d'A-Frame.

Cette leçon n'est que le début. A-Frame est un outil incroyablement puissant et flexible. Dans les prochaines leçons de ce cours "Développer des Expériences Immersives", nous explorerons des concepts plus avancés, tels que :

  • L'intégration de modèles 3D complexes (GLTF, OBJ).
  • L'ajout d'interactivité et d'animations.
  • La création de composants personnalisés avec JavaScript.
  • L'intégration avec des bibliothèques plus spécifiques comme Three.js pour des contrôles plus fins.
  • Les fondations du Web AR.

Continuez à expérimenter avec les primitives et les attributs que vous avez appris. Le meilleur moyen d'apprendre est de construire et de jouer. N'hésitez pas à consulter la documentation officielle d'A-Frame (aframe.io) pour découvrir encore plus de possibilités.

Le monde de la VR vous attend !