Dans cet article, je vais te montrer, pas à pas, ce que j’ai fait pour créer ma propre galerie VR et pourquoi je l’ai fait. Tu découvriras comment créer facilement une galerie 3D pour casque de réalité virtuelle, en utilisant A-Frame, un framework web pour la réalité virtuelle. On va tester notre galerie avec un Oculus Go et créer une navigation type « vol » à l’aide du pad de la manette. Notre galerie affichera trois œuvres d’art de 1m carré, aura un sol de 10m carré et deux grands murs de 12m de haut (genre Richard Serra). Enfin, on placera un lever de soleil pour profiter de l’ambiance.
Sommaire
Pour faire ce tuto facile je te propose d’écouter un peu de musique (encore une playlist abandonnée…)
Horizon existant et légère déception
La plateforme qui me parait être très utilisée en ce moment (en tout cas je tombe régulièrement dessus) : oncyber. Je la trouve très bien, mais (eh oui, on devait s’y attendre) je trouve dommage de ne pas pouvoir voler et de rester clouer au sol. Ou alors il y a un mode VIP ou un mode caché que je ne connais pas et comme je ne suis pas vraiment un gamer, je ne risque pas de le trouver.
Quand j’ai découvert la techno VR, je me suis tout de suite dit : ça y’est on va pouvoir voler ! Et pour l’instant je n’ai pas encore trouvé de plateforme qui nous le permette… (en tout cas pour les galeries d’art) Pourquoi donc ? Pourquoi se clouer au sol alors qu’on peut super facilement s’affranchir de nos jambes et de la pesante pesanteur ? On peut aussi s’affranchir de notre corps et trouver un avatar très créatif, devenir une créature, un robot, un blob, que sais-je, une forme de vie numerico physico impossiblo extraterrestro (on peut continuer la liste 🙂 Bref, je trouve ça plus drôle. Mais on peut aussi rester terre à terre et reproduire le monde réel. Est-ce pour ne pas avoir peur ?
En tout cas tu devrais pouvoir en faire l’expérience avec la suite !
anthopomorphic:: deer flying above old school tron map videogame with a vr:: headset:: in the style of matthew barney --stylize 1000 --v 5Prérequis
Pour suivre ce tutoriel, tu auras besoin de connaissances de base en HTML et un peu de CSS. N’oublie pas de te munir de ton casque de réalité virtuelle (dans notre cas, un Oculus Go) pour tester ton travail.
Créer un projet A-Frame
Pour commencer, crée un nouveau fichier HTML et ajoute le script A-Frame dans la balise <head> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma galerie 3D</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Ton code A-Frame ici -->
</a-scene>
</body>
</html>Créer la galerie
Maintenant que tu as ton projet A-Frame prêt, ajoute les éléments de ta galerie :
- Sol de 10m carré :
<a-plane position="0 0 0" rotation="-90 0 0" width="10" height="10" color="#CCC"></a-plane>- Deux grands murs de 12m de haut, pour tenter de donner un style démesuré imposant à la Richard Serra 😉 nous faire sentir tout petit, et te donner de la place pour afficher d’autres œuvres sur toute la hauteur et plus encore !
<a-box position="-5 6 0" width="0.5" height="12" depth="10" color="#FFF"></a-box>
<a-box position="5 6 0" width="0.5" height="12" depth="10" color="#FFF"></a-box>- Trois œuvres d’art de 1m carré (tu peux aussi réfléchir à une fonction random pour afficher dans l’espace) :
<a-image position="-1.5 5 -5" width="1" height="1" src="url_de_ton_image1"></a-image>
<a-image position="0 5 -5" width="1" height="1" src="url_de_ton_image2"></a-image>
<a-image position="1.5 5 -5" width="1" height="1" src="url_de_ton_image3"></a-image>- Ambiance de lever de soleil à l’intérieur d’une sphère :
<a-sky src="url_de_ta_texture_skybox" rotation="0 -90 0"></a-sky>Configurer la navigation
Pour configurer la navigation « vol », ajoute le composant look-controls et wasd-controls à la caméra :
<a-camera position="0 1.6 0" look-controls wasd-controls></a-camera>Tester sur l’Oculus Go
Pour tester ta galerie sur l’Oculus Go, suis les étapes suivantes :
- Mets en ligne ton fichier HTML sur un serveur web (tu peux utiliser des services gratuits comme GitHub Pages ou Netlify).
- Ouvre le navigateur web de ton Oculus Go (Oculus Browser).
- Entre l’URL de ton fichier HTML hébergé en ligne. (en https de préférence ?)
Adapter la navigation pour l’Oculus Go
Pour adapter la navigation à l’Oculus Go et permettre de se déplacer avec le pad de la manette, ajoute le composant oculus-go-controls à la caméra :
<a-camera position="0 1.6 0" look-controls wasd-controls oculus-go-controls></a-camera>Conclusion : ta galerie 3D est prête !
Félicitations ! Tu as réussi à créer une galerie 3D pour casque de réalité virtuelle facilement. Tu peux maintenant explorer ta galerie en réalité virtuelle avec ton Oculus Go et chiller dans l’ambiance de lever de soleil. N’hésite pas à personnaliser davantage ta galerie et à ajouter d’autres œuvres d’art pour enrichir ton expérience. Les accrocher un peu partout et tester de voler sur le dos le ventre, etc.
Avec A-Frame, créer des expériences de réalité virtuelle est franchement à la portée de tous. Alors, lance-toi et réalise tes propres projets pour impressionner tes potes et partager tes créations avec ta communauté !
