Comment construire un modèle de réalité virtuelle avec une prévisualisation interpériphériques en temps réel

Dans ce didacticiel, nous allons programmer des objets en trois dimensions et leur ajouter des interactions simples. En outre, vous pouvez apprendre à créer un système de transmission de messages simple entre clients et serveurs.

La réalité virtuelle (VR) est une expérience basée sur un environnement généré par ordinateur. un certain nombre de produits de réalité virtuelle font les manchettes et sa gamme d'applications est très large: pour les Jeux olympiques d'hiver, l'équipe américaine a utilisé la réalité virtuelle pour l'entraînement sportif; les chirurgiens expérimentent la réalité virtuelle pour une formation médicale; et le plus souvent, la réalité virtuelle est appliquée aux jeux.

Nous nous concentrerons sur la dernière catégorie d'applications et nous nous concentrerons plus particulièrement sur les jeux d'aventure point-and-click . De tels jeux sont une classe de jeux occasionnels; l'objectif est de pointer et de cliquer sur les objets de la scène pour terminer un mini-jeu. Dans ce tutoriel, nous allons construire une version simple d'un tel jeu mais en réalité virtuelle. Ceci sert d'introduction à la programmation en trois dimensions et constitue un guide de démarrage autonome pour le déploiement d'un modèle de réalité virtuelle sur le Web. Vous construirez avec webVR, un framework offrant un double avantage: les utilisateurs peuvent jouer à votre jeu en réalité virtuelle et les utilisateurs sans casque VR peuvent toujours jouer à votre jeu sur un téléphone ou un ordinateur de bureau.

Dans la seconde moitié de ce didacticiel, vous allez ensuite créer un «miroir» pour votre bureau. Cela signifie que tous les mouvements effectués par le lecteur sur un appareil mobile seront reflétés dans un aperçu du bureau. Cela vous permet de voir ce que le joueur voit, de vous guider, d’enregistrer le jeu ou tout simplement de divertir les invités.

Prérequis

Pour commencer, vous aurez besoin des éléments suivants. Pour la seconde moitié de ce tutoriel, vous aurez besoin d’un Mac OSX. Alors que le code peut s’appliquer à n’importe quelle plate-forme, les instructions d’installation des dépendances ci-dessous s’appliquent à Mac.

• Accès Internet, plus précisément à glitch.com ;
• Un casque à réalité virtuelle (facultatif, recommandé). J'utilise Google Cardboard, qui est proposé à 15 dollars pièce.

Étape 1: Configuration d'un modèle de réalité virtuelle (VR)

Dans cette étape, nous mettra en place un site Web avec une seule page HTML statique. Cela nous permet de coder depuis votre bureau et de les déployer automatiquement sur le Web. Le site Web déployé peut ensuite être chargé sur votre téléphone portable et placé dans un casque VR. Le site Web déployé peut également être chargé par un casque VR autonome. Commencez par naviguer vers glitch.com . Ensuite,

1. Cliquez sur “Nouveau projet” en haut à droite.
2. Cliquez sur “hello-express” dans la liste déroulante.

Cliquez ensuite sur views / index.html dans la barre latérale gauche. Nous nous référerons à cela comme à votre "éditeur".

Pour avoir un aperçu de la page Web, cliquez sur “Aperçu” en haut à gauche. Nous allons parler de cela comme votre preview . Notez que toute modification apportée à votre éditeur sera automatiquement reflétée dans cet aperçu, à l'exception des bogues ou des navigateurs non pris en charge.

Dans votre éditeur, remplacez le code HTML actuel par le standard suivant pour un modèle VR.

Naviguez comme suit:

Grand aperçu )

Pour avoir un aperçu de cela sur votre casque VR, utilisez l'URL dans l'omnibar. Dans l'image ci-dessus, l'URL est https://point-and-click-vr-game.glitch.me/ . Votre environnement de travail est maintenant configuré. n'hésitez pas à partager cette URL avec votre famille et vos amis. Dans l'étape suivante, vous allez créer un modèle de réalité virtuelle.

Étape 2: Construire un modèle d'arbre

Vous allez maintenant créer un arbre à l'aide des primitives de aframe.io . Ce sont des objets standard qu'Aframe a préprogrammés pour en faciliter l'utilisation. Plus précisément, Aframe désigne les objets sous le nom d'entités . Notre discussion est organisée autour de trois concepts, liés à toutes les entités:

1. Géométrie et matériau,
2. Axes de transformation,
3. Transformations relatives.

Premièrement, géométrie et ] matériau sont deux blocs de construction de tous les objets tridimensionnels du code. La géométrie définit la «forme» – un cube, une sphère, une pyramide, etc. Le matériau définit les propriétés statiques de la forme, telles que la couleur, la réflectivité, la rugosité.

Aframe simplifie ce concept pour nous en définissant des primitives, telles que et beaucoup d'autres pour établir une spécification. d'une géométrie et de son matériau plus simple. Commencez par définir une sphère verte. Ajoutez ce qui suit à la ligne 19 de votre code, juste après :

Deuxièmement, il y a trois axes pour transformer notre objet. L'axe x s'étend horizontalement, où les valeurs x augmentent lorsque vous vous déplacez à droite. L'axe y s'étend verticalement, où les valeurs de y augmentent à mesure que nous montons. L’axe z s’écoule en dehors de votre écran, où les valeurs z augmentent à mesure que nous nous déplaçons vers vous. Nous pouvons traduire, faire pivoter ou mettre à l'échelle des entités le long de ces trois axes.

Par exemple, pour traduire un objet «à droite», nous augmentons sa valeur x. Pour faire tourner un objet comme un sommet, nous le faisons pivoter le long de l’axe des y. Modifiez la ligne 19 pour déplacer la sphère vers le haut – cela signifie que vous devez augmenter la valeur y de la sphère. Notez que toutes les transformations sont spécifiées comme ce qui signifie que pour augmenter sa valeur y, vous devez augmenter la deuxième valeur. Par défaut, tous les objets sont situés aux positions 0, 0, 0. Ajoutez la spécification de position ci-dessous

Troisièmement, toutes les transformations sont relatives par rapport à la propriété parent. Pour ajouter un tronc à votre arbre, ajoutez un cylindre à l'intérieur de la sphère ci-dessus. Cela garantit que la position de votre coffre est relative à celle de la sphère. En substance, cela maintient votre arbre ensemble comme une seule unité. Ajoutez l'entité entre les balises et .

Pour créer ces barebones sans arbres, ajoutez davantage de feuillage, sous la forme de deux autres sphères vertes.

Revenez à votre aperçu, et vous L'arbre suivant apparaît:

Rechargez l'aperçu du site Web sur votre casque VR et vérifiez votre nouvel arbre. Dans la section suivante, nous allons rendre cet arbre interactif.

Étape 3: Ajouter l'interaction d'un clic au modèle

Pour rendre une entité interactive, vous devez:

• Ajouter une animation,
• Obtenir cette animation trigger on click

Comme l'utilisateur final utilise un casque de réalité virtuelle, cliquer équivaut à regarder: c'est-à-dire regarder un objet pour qu'il clique dessus. Pour effectuer ces modifications, vous commencerez par le curseur. Redéfinissez la caméra en remplaçant la ligne 13 par la suivante:

La procédure ci-dessus ajoute un curseur pouvant déclencher l'action de clic. Notez les objets : .clickable . Cela signifie que tous les objets avec la classe «cliquable» déclencheront l'animation et recevront une commande «clic» le cas échéant. Vous ajouterez également une animation au curseur de clic afin que les utilisateurs sachent quand le curseur déclenche un clic. Ici, le curseur se rétrécit lentement lorsqu'il pointe sur un objet cliquable, s'accrochant après une seconde pour indiquer qu'un objet a été cliqué. Remplacez le commentaire par le code suivant:

Déplacez l'arborescence vers la droite de 2 unités et ajoutez la classe «cliquable» à l'arborescence, en modifiant la ligne 29 pour correspondre à ce qui suit:

Vous allez ensuite:

• Spécifiez une animation,
• Déclenchez l'animation en un clic.

En raison de l'entité d'animation facile à utiliser d'Aframe, les deux étapes peuvent être effectuées en succession rapide.

Ajouter une balise sur ligne 33, juste après la balise mais avant la fin de la .

Les propriétés ci-dessus spécifient un certain nombre de configurations pour l'animation. L'animation:

• est déclenchée par l'événement click
• Modifie la position de l'arbre
• Commence à partir de la position d'origine 2 0.75 0
• ] Se termine dans 2.2 0.75 0 (déplacement de 0,2 unités vers la droite)
• Anime les déplacements aller-retour à destination
• Animation alternative pour vous rendre à la destination et en revenir
• Répète cette animation une fois . Cela signifie que l'objet s'anime au total deux fois – une fois vers la destination et une fois vers la position d'origine.

Enfin, accédez à votre aperçu et faites glisser le curseur vers votre arborescence. Une fois que le cercle noir repose sur l'arbre, l'arbre se déplacera à droite et à l'arrière.