Comment construire votre première application VR avec ViroReact, React Native et Crowdbotics

Créez une application de réalité virtuelle simple avec des scènes, du texte 3D et PhotoSphere.

La réalité virtuelle (VR) est une technologie immersive qui vise à améliorer l'expérience en fournissant un environnement réaliste en trois dimensions permettant à l'individu de se sentir réel. Les applications de cette technologie sont illimitées. Vous trouverez des applications de jeu totalement immersives et divertissantes, ainsi que des exemples de simulations de soins de santé utilisées pour sauver des vies.

Pour les développeurs natifs de React, cette technologie est rendue accessible par une plate-forme tierce appelée ViroReact. Cette plate-forme permet aux développeurs natifs de React de créer rapidement des applications AR / VR multiplates-formes. ViroReact prend actuellement en charge ARKit, ARCore, VR Cardboard, Gear VR et Daydream. Viro Media

Dans ce didacticiel, nous vous aiderons à suivre le processus d’installation et de configuration, à créer une petite application de réalité virtuelle et à en comprendre les bases.

Vue d'ensemble

  • Mise en route: configuration et installation
  • Qu'est-ce que ViroReact?
  • Construire l'application
  • Scènes et texte dans une application VR
  • Ajouter un effet 3D au texte
  • Ajout d'une photoSphere 360
  • Conclusion

Mise en route: configuration et installation

Pour commencer, nous utiliserons un projet React Native généré par Crowdbotics App Builder. Tout ce dont vous avez besoin pour générer un projet avec Crowdbotics est un accès à la connexion, soit en utilisant votre email personnel, soit via votre profil Github (recommandé).

Une fois connecté, sur la page Créer une application, choisissez le modèle React Native sous Application mobile.

Enfin, choisissez le nom de votre modèle en bas de cette page, puis cliquez sur le bouton Créer mon application !. Après quelques instants, votre projet sera généré. Si vous avez décidé d'accéder via Github, vous recevrez une invitation pour le référentiel Github généré par le service Crowdbotics. Clonez le référentiel sur votre machine de développement pour le moment.

Pour continuer, vous devez avoir les éléments suivants déjà installés sur votre ordinateur dev.

  • Node.js
  • gardien (OSX / Linux uniquement)
  • Python2, JDK (Windows uniquement)
  • Le paquet ngrok installé en tant que module global
  • react-native-cli
  • react-viro-cli

Pour installer les deux outils de ligne de commande, ouvrez une fenêtre de terminal et exécutez la commande suivante.

Après l’installation, assurez-vous de disposer de la dernière version de react-viro-cli, la version 2.13.0 au moment de la rédaction de ce didacticiel. Pour vérifier la version installée, exécutez react-viro-cli --version.

Traverser à l'intérieur du référentiel Github cloné. Une fois à l'intérieur, supprimez tout le contenu sauf les fichiers suivants.

  • répertoire .git
  • .gitattributes
  • .gitignore

La raison en est que l'intégration d'une application React Native déjà existante avec Viro React ne fonctionne pas aussi bien que prévu. Nous allons donc adopter une approche différente. Une fois les fichiers supprimés, utilisez react-viro cli pour créer un nouveau projet prenant en charge l’intégration par défaut.

Par défaut, react-viro-cli utilise le fil pour installer les dépendances du projet. Après cette étape, votre structure de répertoire de projet sera semblable à celle-ci.

Qu'est-ce que ViroReact?

ViroReact est une plate-forme qui vous aide à créer des expériences d’application AR (réalité augmentée) et VR (réalité virtuelle). Il utilise ARKit et ARCore pour implémenter la plate-forme de développement pour des plates-formes mobiles spécifiques telles que iOS et Android. Outre React Native, ViroCore propose une option de développement pour les deux plates-formes natives.

L'API ViroReact est fournie avec un certain nombre de composants React personnalisés permettant de restituer différentes scènes et objets dans un environnement tridimensionnel. Une bonne chose à propos de ViroReact est qu’il est open source, vous n’avez donc pas à vous soucier du paiement des droits de licence. Toutefois, notez qu'en raison de la limitation des périphériques pris en charge par ARKit et ARCore, vous ne pouvez pas utiliser une version extrêmement ancienne du système d'exploitation pour iOS ou Android.

Configuration de l'API Viro et de l'application Testbed

Viro vous fournit une application de test qui peut être installée sur un appareil réel et tester l’application que vous construisez en même temps. Il contient également quelques exemples d’applications de banc d’essai construites à l’aide du noyau ViroReact.

Pour installer sur les appareils iOS de l'application Viro Media, accédez à l'app store ici et pour Android, il existe une application sur le Play store ici. Notez qu'il s'agit d'une étape obligatoire pour pouvoir continuer.

Pour accéder à Viro React Core, vous avez besoin d’une clé API. Connectez-vous ou créez un nouveau compte sur viromedia.com et vous obtiendrez une clé API sur l’email enregistré.

Une fois cela fait, exécutons l’exemple d’application par défaut fourni avec chaque projet Viro utilisant son outil CLI. Tout d'abord, vous devez ajouter la clé API dans le fichier App.js.

Après cela, ouvrez une fenêtre de terminal et un démarrage de npm.

Lorsque vous exécutez un projet Viro, vous remarquerez toujours dans la fenêtre du terminal que, outre le fait que react-native-cliinterface exécute le bundle Metro et charge le graphe de dépendance, react-viro-cli utilise le service ngrok Packager qui vous fournit un point de terminaison. exécutez l'application Viro Media sur un périphérique réel. Vous pouvez voir le point final reflété dans la capture d'écran ci-dessus.

Lorsque vous ouvrez l'application, l'écran ci-dessous vous souhaite la bienvenue.

Ensuite, cliquez sur l'icône en haut à gauche pour accéder à la barre de menus.

Dans la barre de menus, cliquez sur Enter Testbed. Ensuite, entrez le noeud final ngrok généré dans le terminal au démarrage de npm start.

Une fois que cela est fait, cliquez sur le bouton Go et vous serez invité à choisir un environnement comme ci-dessous. Cliquez sur VR.

Vous verrez l'application pré-installée comme ci-dessous en action sur votre appareil.

Construire l'application

Comme tout est en ordre, vous pouvez maintenant aller de l'avant et continuer à travailler sur votre application de réalité virtuelle. Vous avez déjà utilisé une application Hello World pré-construite avec l’outil CLI ViroReact. Dans cette section, nous allons l’éditer et le personnaliser à notre manière pour obtenir le résultat souhaité.

Tout d'abord, nous allons éliminer l'écran dans lequel il vous invite à choisir un environnement de rendu pour une application de test AR ou VR. Puisque nous travaillons uniquement sur une application VR, mettons à jour la fonction render () dans le fichier App.js comme ci-dessous.

La méthode _getVRNavigator () rend le navigateur de scène pour l'expérience VR. Le navigateur de scène est le point d’entrée de toute application Viro. Pour AR, vous trouverez ViroARSceneNavigator et pour VR, ViroVRSceneNavigator. ApiKey et initialScene sont deux accessoires nécessaires au rendu de chaque scène. Dans le fichier App.js, vous obtiendrez la scène actuellement rendue comme ci-dessous. La partie sharedProps est la clé apiKey.

Les accessoires initialScene ont la valeur InitialVRScene. Cette valeur est en fait un composant affiché initialement par le navigateur de scènes. Dans notre cas, il s'agit du composant HelloWorldScene pour le moment.

Scènes et texte dans une application VR

Les applications dans Viro React sont constituées de scènes représentées par le composant ViroScene. Chaque scène est un équivalent des vues. Pour créer une scène de base, il vous suffit de modifier le composant . Ouvrez HelloWorldScene.js. Vous remarquerez que ViroScene est déjà importé.

Ensuite, modifions la fonction de rendu. Créez votre propre scène basée sur du texte.

ViroText est un composant qui fournit une fonctionnalité de texte en deux dimensions. Il utilise des accessoires tels que le texte lui-même, textAlign, fontSize, witdh, position, etc. Le style du texte peut être utilisé avec fontFamily, mais notez que toutes les plateformes ne prennent pas en charge toutes les familles de polices. Vous pouvez également utiliser un objet de style créé à l'aide de StyleSheet à partir du noyau React Native. La taille du texte peut être augmentée ou réduite à l’aide de la propriété fontSize. Voir le résultat de l'extrait de code ci-dessus comme ci-dessous.

Pour activer le texte 3D, il existe un accessoire appelé extrusionDepth auquel une valeur supérieure à zéro permet d'activer le texte 3D. Ajoutons cette propriété au composant ViroText.

Ajouter un effet 3D au texte

Si la valeur de extrusionDepth est supérieure à zéro, vous pouvez appliquer trois matériaux au texte: frontMaterial, backMaterial et sideMaterial. Ajoutons différentes couleurs à ces matériaux pour en voir l’effet. Vous devrez importer ViroMaterials de react-viro pour pouvoir continuer.

Les matériaux constituent l'ensemble des attributs d'ombrage qui définissent l'apparence des surfaces d'une géométrie lors du rendu. Pour voir cela en action, regardez ci-dessous.

Ajout d'une photoSphere 360

Vous avez peut-être remarqué que l'application testbed que nous avions testée précédemment avait une image d'arrière-plan qui agissait comme une sphère 360. Vous trouvez souvent ces 360 images dans les applications de réalité virtuelle. Pour en ajouter un dans notre application dès maintenant, téléchargez un actif à partir de ce lien et collez le fichier dans le répertoire nom du projet / js / res /. Ces actifs sont libres d'utilisation.

Pour ajouter une telle image, Viro React API contient un composant appelé Viro360Image. Vous pouvez l'importer de react-viro.

Ce composant utilise un gyroscope de périphérique pour afficher une vue à 360 degrés. Ajoutez le composant dans ViroScene comme ci-dessous et avant ViroText.

Le chargement initial de l'image peut prendre quelques secondes, mais il apparaît que le chemin est correct. Voir les résultats ci-dessous.

Conclusion

ViroReact fournit un grand ensemble de composants API que vous pouvez utiliser pour étendre votre application de réalité virtuelle. Avez-vous remarqué que nous n’avons jamais eu à redémarrer le bundler ngrok après avoir modifié le composant de l’application? C'est là que réside l'avantage de ViroReact. J'espère que vous avez apprécié ce tutoriel.

Le code complet de ce didacticiel est disponible dans le référentiel Github ci-dessous.

Construire une application Web ou mobile?

Crowdbotics est le moyen le plus rapide de créer, lancer et mettre à l'échelle une application.

Développeur? Testez Crowdbotics App Builder pour échafauder et déployer rapidement des applications avec une variété d’instruments populaires.

Occupé ou non technique? Rejoignez des centaines d’équipes heureuses pour créer des logiciels avec des chefs de projet Crowdbotics et des développeurs experts. Portée de la chronologie et des coûts avec Crowdbotics Managed App Development gratuitement.