Cómo construir un modelo de realidad virtual con una vista previa en tiempo real entre dispositivos
Publicado: 2022-03-10La realidad virtual (VR) es una experiencia basada en un entorno generado por computadora; varios productos de realidad virtual diferentes aparecen en los titulares y sus aplicaciones varían a lo largo y ancho: para los Juegos Olímpicos de invierno, el equipo de EE. UU. utilizó la realidad virtual para el entrenamiento atlético; los cirujanos están experimentando con la realidad virtual para la formación médica; y más comúnmente, la realidad virtual se está aplicando a los juegos.
Nos centraremos en la última categoría de aplicaciones y nos centraremos específicamente en los juegos de aventuras point-and-click . Tales juegos son una clase casual de juegos; el objetivo es señalar y hacer clic en los objetos de la escena, para terminar un rompecabezas. En este tutorial, construiremos una versión simple de dicho juego pero en realidad virtual. Esto sirve como una introducción a la programación en tres dimensiones y es una guía de inicio independiente para implementar un modelo de realidad virtual en la web. Construirá con webVR, un marco que brinda una doble ventaja: los usuarios pueden jugar su juego en VR y los usuarios sin auriculares VR aún pueden jugar su juego en un teléfono o computadora de escritorio.
Desarrollo para realidad virtual
Cualquier desarrollador puede crear contenido para VR hoy en día. Para comprender mejor el desarrollo de la realidad virtual, trabajar en un proyecto de demostración puede ayudar. Leer un artículo relacionado →
En la segunda mitad de este tutorial, construirá un "espejo" para su escritorio. Esto significa que todos los movimientos que haga el jugador en un dispositivo móvil se reflejarán en una vista previa de escritorio. Esto le permite ver lo que ve el jugador, lo que le permite brindar orientación, grabar el juego o simplemente mantener entretenidos a los invitados.
requisitos previos
Para comenzar, necesitará lo siguiente. Para la segunda mitad de este tutorial, necesitará un Mac OSX. Mientras que el código se puede aplicar a cualquier plataforma, las siguientes instrucciones de instalación de dependencias son para Mac.
- Acceso a Internet, específicamente a glitch.com;
- Un visor de realidad virtual (opcional, recomendado). Yo uso Google Cardboard, que se ofrece a $15 por pieza.
Paso 1: Configuración de un modelo de realidad virtual (VR)
En este paso, configuraremos un sitio web con una sola página HTML estática. Esto nos permite codificar desde su escritorio e implementarlo automáticamente en la web. El sitio web implementado se puede cargar en su teléfono móvil y colocar dentro de un auricular VR. Alternativamente, el sitio web implementado se puede cargar con un auricular VR independiente. Comience navegando a glitch.com. Luego,
- Haga clic en "Nuevo proyecto" en la parte superior derecha.
- Haga clic en "hola-express" en el menú desplegable.
A continuación, haz clic en views/index.html en la barra lateral izquierda. Nos referiremos a esto como su "editor".
Para obtener una vista previa de la página web, haga clic en "Vista previa" en la parte superior izquierda. Nos referiremos a esto como su vista previa . Tenga en cuenta que cualquier cambio en su editor se reflejará automáticamente en esta vista previa, salvo errores o navegadores no compatibles.
De vuelta en su editor, reemplace el HTML actual con el siguiente modelo para un modelo 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>Navegar ver lo siguiente.
Para obtener una vista previa de esto en sus auriculares VR, use la URL en el omnibar. En la imagen de arriba, la URL es https://point-and-click-vr-game.glitch.me/ . Su entorno de trabajo ya está configurado; no dude en compartir esta URL con familiares y amigos. En el siguiente paso, creará un modelo de realidad virtual.
Paso 2: construye un modelo de árbol
Ahora creará un árbol usando primitivas de aframe.io. Estos son objetos estándar que Aframe ha preprogramado para facilitar su uso. Específicamente, Aframe se refiere a los objetos como entidades . Hay tres conceptos, relacionados con todas las entidades, para organizar nuestra discusión:
- Geometría y material,
- ejes de transformación,
- Transformaciones relativas.
Primero, la geometría y el material son dos bloques de construcción de todos los objetos tridimensionales en el código. La geometría define la "forma": un cubo, una esfera, una pirámide, etc. El material define las propiedades estáticas de la forma, como el color, la reflectividad, la aspereza.
Aframe nos simplifica este concepto definiendo primitivas, como <a-box> , <a-sphere> , <a-cylinder> y muchas otras para simplificar la especificación de una geometría y su material. Comience definiendo una esfera verde. En la línea 19 de su código, justo después de <!-- start code here --> , agregue lo siguiente.
<!-- start code here --> <a-sphere color="green" radius="0.5"></a-sphere> <!-- new line --> <!-- end code here --> En segundo lugar, hay tres ejes para transformar nuestro objeto. El eje x corre horizontalmente, donde los valores de x aumentan a medida que nos movemos hacia la derecha. El eje y corre verticalmente, donde los valores de y aumentan a medida que nos movemos hacia arriba. El eje z sale de su pantalla, donde los valores z aumentan a medida que nos acercamos a usted. Podemos trasladar, rotar o escalar entidades a lo largo de estos tres ejes.
Por ejemplo, para traducir un objeto a la "derecha", aumentamos su valor x. Para hacer girar un objeto como un trompo, lo rotamos a lo largo del eje y. Modifique la línea 19 para mover la esfera "hacia arriba"; esto significa que necesita aumentar el valor y de la esfera. Tenga en cuenta que todas las transformaciones se especifican como <x> <y> <z> , lo que significa que para aumentar su valor y, debe aumentar el segundo valor. De forma predeterminada, todos los objetos se ubican en la posición 0, 0, 0. Agregue la especificación de position a continuación.
<!-- start code here --> <a-sphere color="green" radius="0.5" position="0 1 0"></a-sphere> <!-- edited line --> <!-- end code here --> Tercero, todas las transformaciones son relativas a su padre. Para agregar un tronco a su árbol, agregue un cilindro dentro de la esfera de arriba. Esto asegura que la posición de tu tronco sea relativa a la posición de la esfera. En esencia, esto mantiene su árbol unido como una unidad. Agregue la entidad <a-cylinder> entre las etiquetas <a-sphere ...> y </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>Para hacer estos barebones sin árboles, agregue más follaje, en forma de dos esferas verdes más.
<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>Vuelve a tu vista previa y verás el siguiente árbol:
Vuelva a cargar la vista previa del sitio web en sus auriculares VR y vea su nuevo árbol. En la siguiente sección, haremos que este árbol sea interactivo.
Paso 3: Agregar interacción de clic al modelo
Para hacer que una entidad sea interactiva, deberá:
- Añadir una animación,
- Haga que esta animación se active al hacer clic.
Dado que el usuario final está utilizando un casco de realidad virtual, hacer clic equivale a mirar fijamente: en otras palabras, mirar fijamente un objeto para “hacer clic” sobre él. Para efectuar estos cambios, comenzará con el cursor. Redefina la cámara reemplazando la línea 13 con lo siguiente.
<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> Lo anterior agrega un cursor que puede desencadenar la acción de hacer clic. Tenga en cuenta los objects: .clickable . Esto significa que todos los objetos con la clase "se puede hacer clic" activarán la animación y recibirán un comando de "clic" cuando corresponda. También agregará una animación al cursor de clic, para que los usuarios sepan cuándo el cursor activa un clic. Aquí, el cursor se encogerá lentamente cuando apunte a un objeto en el que se pueda hacer clic, y se ajustará después de un segundo para indicar que se ha hecho clic en un objeto. Reemplace el comentario <!-- add animation here --> con el siguiente código:
<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>Mueva el árbol a la derecha 2 unidades y agregue la clase "se puede hacer clic" al árbol, modificando la línea 29 para que coincida con lo siguiente.
<a-sphere color="green" radius="0.5" position="2 0.75 0" class="clickable">A continuación, usted:
- Especifique una animación,
- Activa la animación con un clic.
Debido a la entidad de animación fácil de usar de Aframe, ambos pasos se pueden realizar en rápida sucesión.
Agrega una etiqueta <a-animation> en la línea 33, justo después de la etiqueta <a-cylinder> pero antes del final 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>Las propiedades anteriores especifican una serie de configuraciones para la animación. La animación:
- Se desencadena por el evento de
click. - Modifica la
positiondel árbol. - Comienza desde la posición original
2 0.75 0 - Termina en
2.2 0.75 0(moviéndose 0.2 unidades a la derecha) - Anima cuando viaja hacia y desde el destino
- Animación alterna entre viajar hacia y desde el destino.
- Repite esta animación una vez. Esto significa que el objeto se anima dos veces en total: una hacia el destino y otra hacia la posición original.
Finalmente, navegue a su vista previa y arrastre desde el cursor a su árbol. Una vez que el círculo negro descanse sobre el árbol, el árbol se moverá hacia la derecha y hacia atrás.
Esto concluye los conceptos básicos necesarios para construir un juego de aventuras de apuntar y hacer clic, en realidad virtual. Para ver y jugar una versión más completa de este juego, vea la siguiente escena corta. La misión es abrir la puerta y esconder el árbol detrás de la puerta, haciendo clic en varios objetos en la escena.
A continuación, configuramos un servidor nodeJS simple para servir nuestra demostración estática.
Paso 4: configurar el servidor NodeJS
En este paso, configuraremos un servidor nodeJS básico y funcional que sirve a su modelo de realidad virtual existente. En la barra lateral izquierda de su editor, seleccione package.json .
Comience por eliminar las líneas 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", Cambia el nombre a mirrorvr .
{ "name": "mirrorvr", // change me "version": "0.0.1", ... En dependencies , agregue socket.io .
"dependencies": { "express": "^4.16.3", "socketio": "^1.0.0", }, Actualice la URL del repositorio para que coincida con su falla actual. El proyecto de falla de ejemplo se llama point-and-click-vr-game . Reemplace eso con el nombre de su proyecto de falla.
"repository": { "url": "https://glitch.com/edit/#!/point-and-click-vr-game" }, Finalmente, cambie la etiqueta "glitch" a "vr" .
"keywords": [ "node", "vr", // change me "express" ] Vuelva a verificar que su package.json ahora coincida con lo siguiente.
{ "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" ] } Vuelva a verificar que su código de las partes anteriores coincida con lo siguiente, en 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> Modifique el server.js existente.
Comience importando varias utilidades de NodeJS.
- Rápido
Este es el marco web que usaremos para ejecutar el servidor. - http
Esto nos permite lanzar un demonio, escuchando actividad en varios puertos. - socket.io
La implementación de sockets que nos permite comunicarnos entre el lado del cliente y el lado del servidor casi en tiempo real.
Al importar estas utilidades, también inicializamos la aplicación ExpressJS. Tenga en cuenta que las dos primeras líneas ya están escritas para usted.
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, Con las utilidades cargadas, el servidor provisto luego le indica al servidor que devuelva index.html como página de inicio. Tenga en cuenta que no hay un nuevo código escrito a continuación; esto es simplemente una explicación del código fuente existente.
// https://expressjs.com/en/starter/basic-routing.html app.get('/', function(request, response) { response.sendFile(__dirname + '/views/index.html'); });Finalmente, el código fuente existente le indica a la aplicación que se vincule y escuche un puerto, que es 3000 de forma predeterminada a menos que se especifique lo contrario.
// listen for requests :) var listener = app.listen(process.env.PORT, function() { console.log('Your app is listening on port ' + listener.address().port); });Una vez que haya terminado de editar, Glitch recarga automáticamente el servidor. Haga clic en "Mostrar" en la parte superior izquierda para obtener una vista previa de su aplicación.
Su aplicación web ya está en funcionamiento. A continuación, enviaremos mensajes del cliente al servidor.
Paso 5: Enviar información del cliente al servidor
En este paso, usaremos el cliente para inicializar una conexión con el servidor. El cliente informará adicionalmente al servidor si es un teléfono o una computadora de escritorio. Para comenzar, importe el archivo Javascript que pronto existirá en sus views/index.html .
Después de la línea 4, incluya un nuevo guión.
<script src="/client.js" type="text/javascript"></script> En la línea 14, agregue camera-listener a la lista de propiedades de la entidad de cámara.
<a-entity camera-listener camera look-controls...> ... </a-entity> Luego, navega a public/client.js en la barra lateral izquierda. Elimine todo el código Javascript en este archivo. Luego, defina una función de utilidad que verifique si el cliente es un dispositivo móvil.
/** * 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; };A continuación, definiremos una serie de mensajes iniciales para intercambiar con el lado del servidor. Defina un nuevo objeto socket.io para representar la conexión del cliente al servidor. Una vez que el socket se conecte, registre un mensaje en la consola.
var socket = io(); socket.on('connect', function() { console.log(' * Connection established'); }); Verifique si el dispositivo es móvil y envíe la información correspondiente al servidor, utilizando la función emit .
if (mobilecheck()) { socket.emit('newHost'); } else { socket.emit('newMirror'); } Esto concluye el envío del mensaje del cliente. Ahora, modifique el código del servidor para recibir este mensaje y reaccione adecuadamente. Abra el archivo servidor server.js .
Maneje nuevas conexiones e inmediatamente escuche el tipo de cliente. Al final del archivo, agregue lo siguiente.
/** * 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'"); }); });Nuevamente, obtenga una vista previa de la aplicación haciendo clic en "Mostrar" en la parte superior izquierda. Cargue esa misma URL en su dispositivo móvil. En tu terminal, verás lo siguiente.
listening on *: 3000 * Participant registered as 'host' * Participant registered as 'mirror' Este es el primero de un simple paso de mensajes, donde nuestro cliente envía información al servidor. Salga del proceso NodeJS en ejecución. Para la parte final de este paso, haremos que el cliente envíe la información de la cámara al servidor. Abra public/client.js .
Al final del archivo, incluya lo siguiente.
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 }); } }); } Guardar y cerrar. Abra su archivo de servidor server.js para escuchar este evento onMove .
Agregue lo siguiente, en el bloque newHost de su código de 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 */ });Una vez más, cargue la vista previa en su escritorio y en su dispositivo móvil. Una vez que se conecta un cliente móvil, el servidor comenzará inmediatamente a registrar la posición de la cámara y la información de rotación, enviada desde el cliente al servidor. A continuación, implementará lo contrario, donde enviará información desde el servidor al cliente.
Paso 6: Enviar información del servidor al cliente
En este paso, enviará la información de la cámara de un host a todos los espejos. Abra su archivo de servidor principal, server.js .
Cambie el controlador de eventos onMove a lo siguiente:
socket.on('onMove', function(data) { console.log(data); // delete me socket.broadcast.emit('move', data) }); El modificador broadcast asegura que el servidor envíe esta información a todos los clientes conectados al socket, excepto al remitente original. Una vez que esta información se envía a un cliente, debe configurar la cámara del espejo en consecuencia. Abra la secuencia de comandos del cliente, public/client.js .
Aquí, compruebe si el cliente es un escritorio. Si es así, reciba los datos de movimiento y regístrelos en consecuencia.
if (!mobilecheck()) { socket.on('move', function(data) { console.log(data); }); }Cargue la vista previa en su escritorio y en su dispositivo móvil. En su navegador de escritorio, abra la consola del desarrollador. Luego, carga la aplicación en tu teléfono móvil. Tan pronto como el teléfono móvil cargue la aplicación, la consola del desarrollador en su escritorio debería iluminarse con la posición y la rotación de la cámara.
Abra el script del cliente una vez más, en public/client.js . Finalmente ajustamos la cámara del cliente en función de la información enviada.
Modifique el controlador de eventos anterior para el evento de move .
socket.on('move', function(data) { /* start new code */ camera.setAttribute('rotation', data["rotation"]); camera.setAttribute('position', data["position"]); /* end new code */ });Cargue la aplicación en su escritorio y en su teléfono. ¡Cada movimiento de su teléfono se refleja en el espejo correspondiente en su escritorio! Esto concluye la parte del espejo de su aplicación. Como usuario de escritorio, ahora puede obtener una vista previa de lo que ve su usuario móvil. Los conceptos presentados en esta sección serán cruciales para un mayor desarrollo de este juego, ya que transformamos un juego para un solo jugador en un juego para varios jugadores.
Conclusión
En este tutorial, programamos objetos tridimensionales y agregamos interacciones simples a estos objetos. Además, creó un sistema simple de transmisión de mensajes entre clientes y servidores, para lograr una vista previa de escritorio de lo que ven sus usuarios móviles.
Estos conceptos van más allá incluso de webVR, ya que la noción de geometría y material se extiende a SceneKit en iOS (que está relacionado con ARKit), Three.js (la columna vertebral de Aframe) y otras bibliotecas tridimensionales. Estos simples bloques de construcción juntos nos permiten una amplia flexibilidad en la creación de un juego de aventuras de apuntar y hacer clic completo. Más importante aún, nos permiten crear cualquier juego con una interfaz basada en clics.
Aquí hay varios recursos y ejemplos para explorar más a fondo:
- espejoVR
Una implementación completa de la vista previa en vivo creada anteriormente. Con solo un enlace Javascript, agregue una vista previa en vivo de cualquier modelo de realidad virtual en dispositivos móviles a una computadora de escritorio. - Poco a poco
Una galería de dibujos de niños y el modelo de realidad virtual correspondiente de cada dibujo. - Un cuadro
Ejemplos, documentación para desarrolladores y más recursos para el desarrollo de realidad virtual. - Experiencias de cartón de Google
Experiencias para el aula con herramientas personalizadas para educadores.
La próxima vez, construiremos un juego completo, usando sockets web para facilitar la comunicación en tiempo real entre jugadores en un juego de realidad virtual. Siéntase libre de compartir sus propios modelos en los comentarios a continuación.