XR8.AFrame

A-Frame (https://aframe.io) est une structure web conçue pour créer des expériences de réalité virtuelle. En ajoutant 8th Wall Web à votre projet A-Frame, vous pouvez désormais facilement créer des expériences de réalité augmentée pour le web.

Ajout 8th Wall Web à A-Frame

Cloud Editor

1. Il suffit d'ajouter une balise "meta" dans le fichier head.html pour inclure la bibliothèque "8-Frame" dans votre projet. Si vous clonez à partir d'un des modèles basés sur A-Frame de 8th Wall ou d'un projet auto-hébergé, il sera déjà présent. De plus, il n'est pas nécessaire d'ajouter manuellement votre AppKey.

<meta name="8thwall:renderer" content="aframe:1.4.1"&gt ;

Auto-hébergé

8th Wall Web peut être ajouté à votre projet A-Frame en quelques étapes faciles :

1. Inclut une version légèrement modifiée de A-Frame (appelée "8-Frame") qui corrige certains problèmes de polissage :

<script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>

2. Ajoutez la balise de script suivante au HEAD de votre page. Remplacez les X par votre clé d’application :

<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script&gt ;

Configuration de la caméra : xrconfig

Pour configurer le flux de la caméra, ajoutez le composant xrconfig à votre a-scene :

<a-scene xrconfig&gt ;

attributs de xrconfig (tous facultatifs)

Composant	Type	Défaut	Description
cameraDirection	Chaîne	retour"	Appareil photo souhaité. Choisissez parmi : back ou front. Utilisez cameraDirection : front ; avec mirroredDisplay : true ; pour le mode selfie. Notez que le suivi du monde n'est pris en charge qu'avec cameraDirection : back ;.`
appareils autorisés	Chaîne	'mobile-et-casques'	Classes d'appareils prises en charge. Choisissez parmi : 'mobile-and-headsets' , 'mobile' ou 'any'. Utilisez 'any' pour activer les ordinateurs portables ou de bureau dotés d'une webcam intégrée ou connectée. Notez que le suivi du monde n'est possible que sur 'mobile-and-headsets' ou mobile.
mirroredDisplay	Booléen	faux	Si la valeur est vraie, la géométrie de sortie est inversée à gauche et à droite et la direction du flux de la caméra est inversée. Utilisez 'mirroredDisplay : true;' avec 'cameraDirection : front;' pour le mode selfie. Ne doit pas être activé si le suivi du monde (SLAM) est activé.
désactiverXrTablet	Booléen	faux	Désactivez la tablette visible lors des sessions immersives.
xrTabletStartsMinimized	Booléen	faux	La tablette démarre en mode réduit.
désactiver l'environnement par défaut	Booléen	faux	Désactive l'arrière-plan "espace vide" par défaut.
disableDesktopCameraControls	Booléen	faux	Désactivez le WASD et la recherche de la caméra à l'aide de la souris.
disableDesktopTouchEmulation	Booléen	faux	Désactivez les fausses touches du bureau.
désactiverXrTouchEmulation	Booléen	faux	N'émettez pas d'événements tactiles basés sur les rayonnements du contrôleur avec la scène.
désactiver la représentation de la caméra	Booléen	faux	Désactiver le déplacement de l'objet caméra -> contrôleur
defaultEnvironmentFloorScale	Nombre	1	Réduire ou augmenter la texture du sol.
defaultEnvironmentFloorTexture (texture de sol par défaut)	Actif		Indiquez une autre ressource de texture ou une autre URL pour le sol carrelé.
couleur du sol de l'environnement par défaut	Couleur hexagonale	#1A1C2A	Définissez la couleur du sol.
defaultEnvironmentFogIntensity (intensité du brouillard de l'environnement par défaut)	Nombre	1	Augmenter ou diminuer la densité du brouillard.
defaultEnvironmentSkyTopColor (couleur du sommet du ciel)	Couleur hexagonale	#BDC0D6	Définit la couleur du ciel directement au-dessus de l'utilisateur.
defaultEnvironmentSkyBottomColor (couleur du fond de l'environnement)	Couleur hexagonale	#1A1C2A	Définissez la couleur du ciel à l'horizon.
defaultEnvironmentSkyGradientStrength (force du gradient de ciel par défaut)	Nombre	1	Contrôlez la netteté des transitions du dégradé du ciel.

Notes :

• cameraDirection : Lorsque vous utilisez xrweb pour assurer le suivi du monde (SLAM), seule la caméra arrière est prise en charge. Si vous utilisez la caméra frontale `, vous devez désactiver le suivi du monde en réglantdisableWorldTracking : trueonxrweb`.

Suivi du monde, cibles d'images, et/ou VPS Lightship : xrweb

Si vous voulez des cibles d'images de suivi du monde, ou le VPS Lightship, ajoutez le composant xrweb à votre a-scene :

<a-scene xrconfig&gt ;

attributs de xrweb (tous facultatifs)

Composant	Type	Défaut	Description
échelle	Chaîne	'responsive'	Soit "responsive" , soit "absolute". 'responsive' renverra des valeurs telles que la caméra de l'image 1 soit à l'origine définie via XR8.XrController.updateCameraProjectionMatrix(). 'absolute' renvoie la caméra, les images cible, etc. en mètres. La valeur par défaut est "responsive". Lorsque vous utilisez "absolute" , la position x, la position z et la rotation de la pose de départ respectent les paramètres définis dans XR8.XrController.updateCameraProjectionMatrix() une fois que l'échelle a été estimée. La position y dépend de la hauteur physique de la caméra par rapport au plan du sol.
désactiver le suivi du monde	Booléen	faux	Si c'est le cas, désactivez le suivi SLAM pour plus d'efficacité.
activerVps	Booléen	faux	Si c'est le cas, recherchez les Wayspots du projet et un maillage. Le maillage renvoyé n'a aucun rapport avec les Wayspots du projet et sera renvoyé même si aucun Wayspot du projet n'est configuré. L'activation de VPS annule les paramètres d’échelle et disableWorldTracking.
projetWayspots	Réseau	[]	Chaînes séparées par des virgules de noms de projets Wayspot à utiliser exclusivement pour la localisation. Si le paramètre n'est pas défini ou si une chaîne vide est fournie, nous localiserons tous les points de passage du projet à proximité.

Notes :

• xrweb et xrface ne peuvent pas être utilisés en même temps.
• xrweb et xrlayers peuvent être utilisés en même temps. Vous devez utiliser xrconfig pour ce faire.
  • La meilleure pratique consiste à toujours utiliser xrconfig; cependant, si vous utilisez xrweb sans xrface ou xrlayers ou xrconfig, alors xrconfig sera ajouté automatiquement. À ce moment-là, tous les attributs de qui ont été définis sur xrweb seront transmis à xrconfig.
• cameraDirection : Le suivi du monde (SLAM) n'est pris en charge que sur la caméra arrière . Si vous utilisez la caméra frontale `, vous devez désactiver le suivi du monde en définissantdisableWorldTracking : true`.
• Le suivi du monde (SLAM) n'est possible que sur les appareils mobiles.

Effets de ciel : xrlayers et xrlayerscene

Si vous voulez Sky Effects :

1. Ajoutez le composant xrlayers à votrea-scène
2. Ajoutez le composant xrlayerscene à une a-entity et ajoutez le contenu que vous souhaitez voir apparaître dans le ciel sous cette a-entity.

  
    <!-- Ajoutez votre contenu Sky Effects ici. -->
  

xrlayers Attributs

Aucun

Notes :

• les xrlayers et xrface ne peuvent pas être utilisés en même temps.
• xrlayers et xrweb peuvent être utilisés en même temps. Vous devez utiliser xrconfig pour ce faire.
  • La meilleure pratique consiste à toujours utiliser xrconfig; cependant, si vous utilisez xrlayers sans xrface ou xrweb ou xrconfig, alors xrconfig sera ajouté automatiquement. À ce moment-là, tous les attributs définis sur xrweb seront transmis à xrconfig.

xrlayerscene Attributs

Composant	Type	Défaut	Description
nom	Chaîne	''	Le nom de la couche. Doit correspondre à une couche de XR8.LayersController. La seule couche prise en charge à l'heure actuelle est sky.
invertLayerMask	Booléen	faux	Si cette option est activée, le contenu que vous placez dans votre scène occultera les zones qui ne sont pas dans le ciel. S'il est faux, le contenu que vous placez dans votre scène occultera les zones du ciel.
douceur des bords	Nombre	0	Montant pour lisser les bords de la couche. Valeurs valables entre 0 et 1.

Effets de visage : xrface

Si vous voulez suivre les effets de visage, ajoutez le composant xrface à votre a-scene :

<a-scene xrconfig&gt ;

xrface Attributs

Composant	Type	Défaut	Description
meshGeometry	Réseau	['face']	Chaînes de caractères séparées par des virgules qui configurent les parties du maillage de la face pour lesquelles des indices de triangle seront renvoyés. Peut être une combinaison de "visage", "yeux", "iris" et/ou "bouche".
maxDetections [Facultatif]	Nombre	1	Nombre maximal de visages à détecter. Les choix possibles sont 1, 2 ou 3.
uvType [Facultatif]	Chaîne	[XR8.FaceController.UvType.STANDARD]	Spécifie quels uv sont renvoyés dans l'événement de scan des visages et de chargement des visages. Les options sont les suivantes : [XR8.FaceController.UvType.STANDARD, XR8.FaceController.UvType.PROJECTED]

Notes :

• xrface et xrweb ne peuvent pas être utilisés en même temps.
• xrface et xrlayers ne peuvent pas être utilisés en même temps.
• La meilleure pratique consiste à toujours utiliser xrconfig ; cependant, si vous utilisez xrlayers sans xrconfig , xrconfig sera ajouté automatiquement. À ce moment-là, tous les attributs définis sur xrface seront transmis à xrconfig.

Suivi des mains : xrhand

Si vous souhaitez le suivi des mains, ajoutez le composant xrhand à votre scène a-scene:

<a-scene xrconfig&gt ;

xrhand Attributs

Aucun

Notes :

• xrhand et xrweb ne peuvent pas être utilisés en même temps.
• xrhand et xrlayers ne peuvent pas être utilisés en même temps.
• xrhand et xrface ne peuvent pas être utilisés en même temps.

Fonctions

Fonction	Description
xrconfigComponent	Crée un composant A-Frame pour la configuration de la caméra qui peut être enregistré avec AFRAME.registerComponent(). En général, il n'est pas nécessaire de l'appeler directement.
xrwebComponent	Crée un composant A-Frame pour le suivi du monde et/ou le suivi de l'image cible qui peut être enregistré avec AFRAME.registerComponent(). En général, il n'est pas nécessaire de l'appeler directement.
xrlayersComponent	Crée un composant A-Frame pour le suivi des couches qui peut être enregistré avec AFRAME.registerComponent(). En général, il n'est pas nécessaire de l'appeler directement.
xrfaceComponent	Crée un composant A-Frame pour le suivi des effets de visage qui peut être enregistré avec AFRAME.registerComponent(). En général, il n'est pas nécessaire de l'appeler directement.
xrlayersceneComponent	Crée un composant A-Frame pour une scène Layer qui peut être enregistré avec AFRAME.registerComponent(). En général, il n'est pas nécessaire de l'appeler directement.

Exemple - SLAM activé (par défaut)

<a-scene xrconfig&gt ;

Exemple - SLAM désactivé (suivi d'image uniquement)

<a-scene xrconfig xrweb="disableWorldTracking : true"&gt ;

Exemple - Activer VPS

<a-scene xrconfig xrweb="enableVps: true; projectWayspots=wayspot1,wayspot2,wayspot3">

Exemple - Caméra frontale (suivi d'image uniquement)

<a-scene xrconfig="cameraDirection : front" xrweb="disableWorldTracking : true"&gt ;

Exemple - Caméra frontale Effets de ciel

<a-scene xrconfig="cameraDirection : front" xrlayers&gt ;

Exemple - Sky + SLAM

<a-scene xrconfig xrweb xrlayers>
  <a-entity xrlayerscene="name: sky; edgeSmoothness:0.6; invertLayerMask: true;">
    <!-- Ajoutez votre contenu Sky Effects ici. -->
  

Exemple - Effets de visage

<a-scene xrconfig&gt ;

Exemple - Suivi des mains

<a-scene xrconfig&gt ;