Comment créer un modèle de réalité virtuelle avec un aperçu multi-appareils en temps réel
Publié: 2022-03-10La réalité virtuelle (VR) est une expérience basée sur un environnement généré par ordinateur ; un certain nombre de produits VR différents font la une des journaux et leurs applications sont très variées : 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 la 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 intéresserons spécifiquement aux jeux d'aventure pointer-cliquer . Ces jeux sont une classe de jeux occasionnels; le but est de pointer et de cliquer sur des objets dans la scène, pour terminer un puzzle. Dans ce tutoriel, nous allons construire une version simple d'un tel jeu mais en réalité virtuelle. Il 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 qui offre un double avantage : les utilisateurs peuvent jouer à votre jeu en VR et les utilisateurs sans casque VR peuvent toujours jouer à votre jeu sur un téléphone ou un ordinateur de bureau.
Développer pour la réalité virtuelle
De nos jours, n'importe quel développeur peut créer du contenu pour la réalité virtuelle. Pour mieux comprendre le développement de la réalité virtuelle, travailler sur un projet de démonstration peut aider. Lire un article connexe →
Dans la seconde moitié de ce didacticiel, vous construirez ensuite un "miroir" pour votre bureau. Cela signifie que tous les mouvements effectués par le joueur sur un appareil mobile seront reflétés dans un aperçu du bureau. Cela vous permet de voir ce que le joueur voit, vous permettant de fournir des conseils, d'enregistrer le jeu ou simplement de divertir les invités.
Conditions préalables
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 sont pour Mac.
- Accès Internet, en particulier à glitch.com ;
- Un casque de réalité virtuelle (facultatif, recommandé). J'utilise Google Cardboard, qui est proposé à 15 $ pièce.
Étape 1 : Configuration d'un modèle de réalité virtuelle (RV)
Dans cette étape, nous allons configurer un site Web avec une seule page HTML statique. Cela nous permet de coder à partir de votre bureau et de déployer automatiquement sur le Web. Le site Web déployé peut ensuite être chargé sur votre téléphone mobile et placé dans un casque VR. Alternativement, le site Web déployé peut être chargé par un casque VR autonome. Commencez par naviguer sur glitch.com. Puis,
- Cliquez sur "Nouveau projet" en haut à droite.
- Cliquez sur "hello-express" dans le menu déroulant.
Ensuite, cliquez sur views/index.html dans la barre latérale gauche. Nous l'appellerons votre "éditeur".
Pour prévisualiser la page Web, cliquez sur "Aperçu" en haut à gauche. Nous appellerons cela votre aperçu . Notez que toute modification apportée à votre éditeur sera automatiquement répercutée dans cet aperçu, à l'exception des bogues ou des navigateurs non pris en charge.
De retour dans votre éditeur, remplacez le code HTML actuel par le passe-partout suivant pour un modèle VR.
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"></a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <!-- end code here --> </a-scene> </body> </html>Naviguez voir ce qui suit.
Pour prévisualiser 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 en utilisant les primitives de aframe.io. Ce sont des objets standards qu'Aframe a préprogrammés pour une utilisation facile. Plus précisément, Aframe fait référence aux objets en tant qu'entités . Il y a trois concepts, liés à toutes les entités, pour organiser notre discussion autour :
- Géométrie et matière,
- haches de transformation,
- Transformations relatives.
Premièrement, la géométrie et le matériau sont deux éléments constitutifs 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 <a-box> , <a-sphere> , <a-cylinder> et bien d'autres pour simplifier la spécification d'une géométrie et de son matériau. Commencez par définir une sphère verte. À la ligne 19 de votre code, juste après <!-- start code here --> , ajoutez ce qui suit.
<!-- start code here --> <a-sphere color="green" radius="0.5"></a-sphere> <!-- new line --> <!-- end code here --> Deuxièmement, il y a trois axes pour transformer notre objet. L'axe x s'étend horizontalement, où les valeurs x augmentent à mesure que nous nous déplaçons vers la droite. L'axe y s'étend verticalement, où les valeurs y augmentent à mesure que nous montons. L'axe z sort de votre écran, où les valeurs z augmentent à mesure que nous nous rapprochons de vous. Nous pouvons translater, 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 une toupie, nous le faisons pivoter le long de l'axe 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 sous la forme <x> <y> <z> , 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 à la position 0, 0, 0. Ajoutez la spécification de position ci-dessous.
<!-- start code here --> <a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line --> <!-- end code here --> Troisièmement, toutes les transformations sont relatives à son 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 tronc est relative à la position de la sphère. Essentiellement, cela maintient votre arbre ensemble comme une seule unité. Ajoutez l'entité <a-cylinder> entre les balises <a-sphere ...> et </a-sphere> .
<a-sphere color="green" radius="0.5" position="0 1 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <!-- new line --> </a-sphere>Pour faire ces barebones sans arbres, ajoutez plus de feuillage, sous la forme de deux sphères vertes supplémentaires.
<a-sphere color="green" radius="0.5" position="0 0.75 0"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <!-- new line --> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <!-- new line --> </a-sphere>Revenez à votre aperçu et vous verrez l'arborescence suivante :
Rechargez l'aperçu du site Web sur votre casque VR et découvrez votre nouvel arbre. Dans la section suivante, nous rendrons cet arbre interactif.
Étape 3 : Ajouter une interaction de clic au modèle
Pour rendre une entité interactive, vous devrez :
- Ajouter une animation,
- Avoir cette animation déclenchée au clic.
L'utilisateur final utilisant un casque de réalité virtuelle, cliquer équivaut à fixer : c'est-à-dire fixer un objet pour « cliquer » dessus. Pour effectuer ces modifications, vous commencerez par le curseur. Redéfinissez la caméra en remplaçant la ligne 13 par la suivante.
<a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <!-- add animation here --> </a-entity> </a-entity> Ce qui précède ajoute un curseur qui peut déclencher l'action de clic. Notez les objects: .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 <!-- add animation here --> par le code suivant :
<a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation>Déplacez l'arbre vers la droite de 2 unités et ajoutez la classe "cliquable" à l'arbre, en modifiant la ligne 29 pour qu'elle corresponde à ce qui suit.
<a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">Ensuite, vous allez :
- Spécifiez une animation,
- Déclenchez l'animation en un clic.
Grâce à l'entité d'animation facile à utiliser d'Aframe, les deux étapes peuvent être effectuées en succession rapide.
Ajoutez une <a-animation> à la ligne 33, juste après la <a-cylinder> mais avant la fin de </a-sphere> .
<a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation>Les propriétés ci-dessus spécifient un certain nombre de configurations pour l'animation. L'animation:
- Est déclenché par l'événement
click - Modifie la
positionde l'arbre - Commence à partir de la position d'origine
2 0.75 0 - Se termine par
2.2 0.75 0(déplacement de 0,2 unité vers la droite) - S'anime lors des déplacements vers et depuis la destination
- Alterne l'animation entre les déplacements vers et depuis la destination
- Répète cette animation une fois. Cela signifie que l'objet s'anime deux fois au total - 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 arbre. Une fois que le cercle noir repose sur l'arbre, l'arbre se déplacera vers la droite et en arrière.
Ceci conclut les bases nécessaires pour construire un jeu d'aventure pointer-cliquer, en réalité virtuelle. Pour voir et jouer à une version plus complète de ce jeu, regardez la courte scène suivante. La mission est d'ouvrir la porte et de cacher l'arbre derrière la porte, en cliquant sur divers objets de la scène.
Ensuite, nous avons configuré un simple serveur nodeJS pour servir notre démo statique.
Étape 4 : Configurer le serveur NodeJS
Dans cette étape, nous allons configurer un serveur nodeJS basique et fonctionnel qui sert votre modèle VR existant. Dans la barre latérale gauche de votre éditeur, sélectionnez package.json .
Commencez par supprimer les lignes 2-4.
"//1": "describes your app and its dependencies", "//2": "https://docs.npmjs.com/files/package.json", "//3": "updating this file will download and update your packages", Changez le nom en mirrorvr .
{ "name": "mirrorvr", // change me "version": "0.0.1", ... Sous dependencies , ajoutez socket.io .
"dependencies": { "express": "^4.16.3", "socketio": "^1.0.0", }, Mettez à jour l'URL du référentiel pour qu'elle corresponde à votre problème actuel. L'exemple de projet glitch est nommé point-and-click-vr-game . Remplacez-le par le nom de votre projet glitch.
"repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, Enfin, changez la balise "glitch" en "vr" .
"keywords": [ "node", "vr", // change me "express" ] Vérifiez que votre package.json correspond maintenant à ce qui suit.
{ "name": "mirrorvr", "version": "0.0.1", "description": "Mirror virtual reality models", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.16.3", "socketio": "^1.0.0" }, "engines": { "node": "8.x" }, "repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, "license": "MIT", "keywords": [ "node", "vr", "express" ] } Vérifiez que votre code des parties précédentes correspond à ce qui suit, dans views/index.html .
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <!-- blue sky --> <a-sky color="#a3d0ed"></a-sky> <!-- camera with wasd and panning controls --> <a-entity camera look-controls wasd-controls position="0 0.5 2" rotation="0 0 0"> <a-entity cursor="fuse: true; fuseTimeout: 250" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: black; shader: flat" scale="0.5 0.5 0.5" raycaster="far: 20; interval: 1000; objects: .clickable"> <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="backwards" from="1 1 1" to="0.2 0.2 0.2" dur="250"></a-animation> </a-entity> </a-entity> <!-- brown ground --> <a-box shadow shadow="receive:true" color="#847452" width="10" height="0.1" depth="10"></a-box> <!-- start code here --> <a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable"> <a-cylinder color="#84651e" position="0 -0.9 0" radius="0.05"></a-cylinder> <a-sphere color="green" radius="0.35" position="0 0.5 0"></a-sphere> <a-sphere color="green" radius="0.2" position="0 0.8 0"></a-sphere> <a-animation begin="click" attribute="position" from="2 0.75 0" to="2.2 0.75 0" fill="both" direction="alternate" repeat="1"></a-animation> </a-sphere> <!-- end code here --> </a-scene> </body> </html> Modifiez le server.js existant.
Commencez par importer plusieurs utilitaires NodeJS.
- Express
Il s'agit du framework Web que nous utiliserons pour exécuter le serveur. - http
Cela nous permet de lancer un démon, à l'écoute de l'activité sur différents ports. - socket.io
L'implémentation des sockets qui nous permet de communiquer entre le côté client et le côté serveur en temps quasi réel.
Lors de l'importation de ces utilitaires, nous initialisons également l'application ExpressJS. Notez que les deux premières lignes sont déjà écrites pour vous.
var express = require('express'); var app = express(); /* start new code */ var http = require('http').Server(app); var io = require('socket.io')(http); /* end new code */ // we've started you off with Express, Une fois les utilitaires chargés, le serveur fourni demande ensuite au serveur de renvoyer index.html comme page d'accueil. Notez qu'il n'y a pas de nouveau code écrit ci-dessous ; il s'agit simplement d'une explication du code source existant.
// https://expressjs.com/en/starter/basic-routing.html app.get('/', function(request, response) { response.sendFile(__dirname + '/views/index.html'); });Enfin, le code source existant demande à l'application de se lier et d'écouter un port, qui est 3000 par défaut, sauf indication contraire.
// listen for requests :) var listener = app.listen(process.env.PORT, function() { console.log('Your app is listening on port ' + listener.address().port); });Une fois que vous avez terminé l'édition, Glitch recharge automatiquement le serveur. Cliquez sur "Afficher" en haut à gauche pour prévisualiser votre application.
Votre application Web est maintenant opérationnelle. Ensuite, nous enverrons des messages du client au serveur.
Étape 5 : Envoyer des informations du client au serveur
Dans cette étape, nous allons utiliser le client pour initialiser une connexion avec le serveur. Le client informera en outre le serveur s'il s'agit d'un téléphone ou d'un ordinateur de bureau. Pour commencer, importez le fichier Javascript qui va bientôt exister dans votre views/index.html .
Après la ligne 4, incluez un nouveau script.
<script src="/client.js" type="text/javascript"></script> À la ligne 14, ajoutez camera-listener à la liste des propriétés de l'entité caméra.
<a-entity camera-listener camera look-controls...> ... </a-entity> Ensuite, accédez à public/client.js dans la barre latérale gauche. Supprimez tout le code Javascript dans ce fichier. Définissez ensuite une fonction utilitaire qui vérifie si le client est un appareil mobile.
/** * Check if client is on mobile */ function mobilecheck() { var check = false; (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); return check; };Ensuite, nous définirons une série de messages initiaux à échanger avec le côté serveur. Définissez un nouvel objet socket.io pour représenter la connexion du client au serveur. Une fois le socket connecté, enregistrez un message dans la console.
var socket = io(); socket.on('connect', function() { console.log(' * Connection established'); }); Vérifiez si l'appareil est mobile et envoyez les informations correspondantes au serveur à l'aide de la fonction emit .
if (mobilecheck()) { socket.emit('newHost'); } else { socket.emit('newMirror'); } Ceci conclut l'envoi du message du client. Maintenant, modifiez le code du serveur pour recevoir ce message et réagissez en conséquence. Ouvrez le fichier server.js du serveur.
Gérez les nouvelles connexions et écoutez immédiatement le type de client. À la fin du fichier, ajoutez ce qui suit.
/** * Handle socket interactions */ io.on('connection', function(socket) { socket.on('newMirror', function() { console.log(" * Participant registered as 'mirror'") }); socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); }); });Encore une fois, prévisualisez l'application en cliquant sur "Afficher" en haut à gauche. Chargez cette même URL sur votre appareil mobile. Dans votre terminal, vous verrez ce qui suit.
listening on *: 3000 * Participant registered as 'host' * Participant registered as 'mirror' C'est le premier passage de messages simple, où notre client renvoie des informations au serveur. Quittez le processus NodeJS en cours d'exécution. Pour la dernière partie de cette étape, nous demanderons au client de renvoyer les informations de la caméra au serveur. Ouvrez public/client.js .
À la toute fin du fichier, incluez les éléments suivants.
var camera; if (mobilecheck()) { AFRAME.registerComponent('camera-listener', { tick: function () { camera = this.el.sceneEl.camera.el; var position = camera.getAttribute('position'); var rotation = camera.getAttribute('rotation'); socket.emit('onMove', { "position": position, "rotation": rotation }); } }); } Sauver et fermer. Ouvrez votre fichier serveur server.js pour écouter cet événement onMove .
Ajoutez ce qui suit, dans le bloc newHost de votre code socket.
socket.on('newHost', function() { console.log(" * Participant registered as 'host'"); /* start new code */ socket.on('onMove', function(data) { console.log(data); }); /* end new code */ });Encore une fois, chargez l'aperçu sur votre bureau et sur votre appareil mobile. Une fois qu'un client mobile est connecté, le serveur commence immédiatement à enregistrer les informations de position et de rotation de la caméra, envoyées du client au serveur. Ensuite, vous implémenterez l'inverse, où vous renverrez les informations du serveur au client.
Étape 6 : Envoyer des informations du serveur au client
Dans cette étape, vous enverrez les informations de la caméra d'un hôte à tous les miroirs. Ouvrez votre fichier de serveur principal, server.js .
Remplacez le gestionnaire d'événements onMove par ce qui suit :
socket.on('onMove', function(data) { console.log(data); // delete me socket.broadcast.emit('move', data) }); Le modificateur broadcast garantit que le serveur envoie ces informations à tous les clients connectés au socket, à l'exception de l'expéditeur d'origine. Une fois ces informations envoyées à un client, vous devez ensuite régler la caméra du miroir en conséquence. Ouvrez le script client, public/client.js .
Ici, vérifiez si le client est un ordinateur de bureau. Si c'est le cas, recevez les données de mouvement et enregistrez-vous en conséquence.
if (!mobilecheck()) { socket.on('move', function(data) { console.log(data); }); }Chargez l'aperçu sur votre bureau et sur votre appareil mobile. Dans votre navigateur de bureau, ouvrez la console développeur. Ensuite, chargez l'application sur votre téléphone mobile. Dès que le téléphone mobile charge l'application, la console développeur sur votre bureau doit s'allumer avec la position et la rotation de la caméra.
Ouvrez à nouveau le script client, dans public/client.js . Nous ajustons enfin la caméra client en fonction des informations envoyées.
Modifiez le gestionnaire d'événements ci-dessus pour l'événement de move .
socket.on('move', function(data) { /* start new code */ camera.setAttribute('rotation', data["rotation"]); camera.setAttribute('position', data["position"]); /* end new code */ });Chargez l'application sur votre bureau et votre téléphone. Chaque mouvement de votre téléphone se reflète dans le miroir correspondant sur votre bureau ! Ceci conclut la partie miroir de votre application. En tant qu'utilisateur de bureau, vous pouvez désormais prévisualiser ce que votre utilisateur mobile voit. Les concepts introduits dans cette section seront cruciaux pour le développement ultérieur de ce jeu, car nous transformons un jeu solo en un jeu multijoueur.
Conclusion
Dans ce tutoriel, nous avons programmé des objets tridimensionnels et ajouté des interactions simples à ces objets. De plus, vous avez créé un système de transmission de messages simple entre les clients et les serveurs, pour effectuer un aperçu sur le bureau de ce que vos utilisateurs mobiles voient.
Ces concepts vont même au-delà du webVR, car la notion de géométrie et de matériau s'étend à SceneKit sur iOS (qui est lié à ARKit), Three.js (l'épine dorsale d'Aframe) et d'autres bibliothèques tridimensionnelles. Ces blocs de construction simples assemblés nous permettent une grande flexibilité dans la création d'un jeu d'aventure pointer-cliquer à part entière. Plus important encore, ils nous permettent de créer n'importe quel jeu avec une interface basée sur les clics.
Voici plusieurs ressources et exemples à explorer davantage :
- Miroir VR
Une implémentation complète de l'aperçu en direct construit ci-dessus. Avec un seul lien Javascript, ajoutez un aperçu en direct de n'importe quel modèle de réalité virtuelle sur mobile à un ordinateur de bureau. - Petit à petit
Une galerie de dessins d'enfants et le modèle de réalité virtuelle correspondant à chaque dessin. - Un cadre
Exemples, documentation pour les développeurs et autres ressources pour le développement de la réalité virtuelle. - Expériences Google Cardboard
Expériences pour la salle de classe avec des outils personnalisés pour les enseignants.
La prochaine fois, nous construirons un jeu complet, en utilisant des sockets Web pour faciliter la communication en temps réel entre les joueurs dans un jeu de réalité virtuelle. N'hésitez pas à partager vos propres modèles dans les commentaires ci-dessous.