Catégories
code créativité débutant

Comment créer une galerie 3D pour casque de Réalité Virtuelle facilement

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.

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 5

Pré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é !

Tu as ❤ aimé l’article ?

J'ai créé un guide pour te lancer rapidement dans le crypto art.

Tu y découvriras :

  • La blockchain
  • Les NFTs
  • L'installation d'un wallet crypto
  • La frappe et la vente ton premier NFT
Si tu as aimé l'article, tu es libre de le partager ;)

Par François

J'ai créé le blog L'Artiste Crypto dans le but d'aider les artistes amateurs comme moi à se professionnaliser. Je souhaite apporter de l'inspiration en documentant la poursuite d'un objectif : devenir crypto artiste et réussir sur le Web3. A travers des articles, des vidéos et des interviews j'espère y parvenir et te faciliter la tâche.

Laisser un commentaire