[A-Frame](https://aframe.io/) est un framework [VR (Réalité virtuelle)](https://fr.wikipedia.org/wiki/R%C3%A9alit%C3%A9_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](https://www.w3.org/TR/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](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a) 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
<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 &laquo;cloud&raquo;. J'utilise AWS S3 et je copie simplement
le code dans une collection.

Ce petit script de bash fait ça pour moi :

```bash
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

- A-Frame : [https://aframe.io](https://aframe.io/)

- WebXR : [https://www.w3.org/TR/webxr](https://www.w3.org/TR/webxr/)

- Artemis tournante code source : [https://github.com/tderflinger/rotating-artemis-aframe](https://github.com/tderflinger/rotating-artemis-aframe)

- Artemis model de [Rigsters](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a), licence est CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)


large_rotating-sculpture.png

medium_rotating-sculpture.png

small_rotating-sculpture.png

thumbnail_rotating-sculpture.png

A-Frame est un framework VR (Réalité virtuelle) écrit en JavaScript développé par Mozilla. Il s'exécute dans le navigateur et peut afficher des scènes 3D interactives dans votre appareil VR. Comment construire un site web VR d'une sculpture tournante avec A-Frame que je veux montrer dans cet article.

Sculpture tournante en VR avec A-Frame

Veuillez entrer une adresse e-mail valide.

Je suis heureux de répondre à toutes les questions que vous pourriez avoir. Ou simplement dis bonjour !

Réflexions par Thomas Derflinger

VR catégorie

Sculpture tournante en VR avec A-Frame