Thomas DerflingerRéflexions par Thomas Derflinger
cover image
VR

Sculpture tournante en VR avec A-Frame

A-Frame est un framework VR (Réalité virtuelle) écrit en JavaScript et développé par Mozilla. Il s'exécute dans le navigateur et peut afficher des scènes 3D interactives à l'aide du navigateur normal du bureau. Il supporte également les casques VR comme Oculus Go, Oculus Quest, HTC Vive et Windows Mixed Reality.

A-Frame prend en charge WebVR ou son successeur WebXR. Il est développé comme un standard du W3C. Le standard WebXR est actuellement en cours de développement, mais le support par les navigateurs gagne du terrain.

Je veux vous montrer dans cet article comment construire un site web en VR d'une sculpture tournante avec A-Frame.

Tout d'abord, vous avez besoin d'un objet 3D. Des objets appropriés peuvent être trouvés sur des sites comme SketchFab. Pour les besoins de cet article j`ai choisi la sculpture d'Artemis de C. Bjerg et Poul Holsøe de 1934. Il se dresse dans un parc à Copenhague, Danemark. Artémis est la déesse de la chasse et des animaux sauvages dans la religion grecque ancienne.

Le modèle 3D possède une licence permissive et peut être utilisé par attribution. Lorsque vous téléchargez le fichier, seulement l'OBJ et les textures sont nécessaires.

Ensuite, vous avez besoin d'un fichier HTML où le chargement du fichier de la sculpture et le positionnement ont lieu. Ceci est aussi simple que de charger les fichiers JavaScript de l'A-Frame dans la section head et ensuite de construire un fichier scène. Les éléments HTML du framework A-Frame commencent toujours par a- . L'objet scène est donc appelé a-scene, l'objet céleste a-sky et ainsi de suite.

Vous pouvez donc utiliser vos connaissances du développement Web lors de la création d'une scène 3D avec A-Frame.

Voici à quoi ressemble la scène VR terminée dans le code source :

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-plane
        position="0 0 -4"
        rotation="-90 0 0"
        width="4"
        height="4"
        color="#000000"
      ></a-plane>
      <a-sky color="#FFFFFF"></a-sky>
      <a-assets>
        <a-asset-item
          id="hall-obj"
          src="./artemisfountain-low.OBJ"
        ></a-asset-item>
        <img id="hall-texture" src="./textures/artemis-diffuse-bw.jpg" />
      </a-assets>
      <a-entity
        position="0 -32 -50"
        animation="property: rotation; to: -90 360 0; loop: true; dur: 10000"
        rotation="-90 0 0"
        obj-model="obj: #hall-obj;"
        material="src: #hall-texture"
        id="hall"
      >
        <a-entity position="0 20 -120"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>

Vous pouvez voir que la sculpture est appelée un actif et chargée avec l'élément a-assets. La rotation réelle se fait dans l'entité a-entity avec l'attribut animation. Vous avez besoin de faire attention avec le système de coordonnées pour tourner dans la bonne direction.

Sinon, tout cela est déclaratif et peu codé.

Vous devez maintenant accéder à la scène à partir de votre périphérique VR. Avec mon Oculus Go, je suis obligé de me connecter à un enregistrement en tant que développeur pour transférer les données de mon ordinateur vers l'Oculus Go.

Vous pouvez donc contourner ce problème en déployant le code HTML dans le «cloud». J'utilise AWS S3 et je copie simplement le code dans une collection.

Ce petit script de bash fait ça pour moi :

cd src
aws s3 sync --acl public-read . s3://vr.tderflinger.com
firefox vr.tderflinger.com.s3-website.eu-central-1.amazonaws.com

Dans le répertoire /src je trouve le code source d'A-Frame qui est copié dans ma collection, vr.tderflinger.com. Ensuite, je peux ouvrir l'URL dans mon navigateur. L'URL que vous devez également saisir dans le navigateur de votre périphérique VR.

Ensuite, vous pouvez cliquer sur l'icône en bas à droite et vous êtes plongé dans la scène.

Le code source du projet peut être téléchargé à partir du lien GitHub ci-dessous.

Conclusion

Pour les personnes venant du développement web, il est relativement facile de commencer avec A-Frame. A-Frame s`appuie désormais sur la technologie Web pour construire pas à pas des projets plus ambitieux.

Sources et lectures complémentaires

Publié le 1 juillet 2019

Creative Commons License
Cette œuvre est soumise à une licence Creative Commons Attribution 4.0 International License.
Thomas Derflinger

Écrit par Thomas Derflinger

Je suis un entrepreneur visionnaire et un développeur de logiciels. Dans ce blog, j'écris principalement sur la programmation web et des sujets connexes comme l'IdO.