Tabla de contenidos p>
Introducción h3>
WebVR es una API de JavaScript que permite a las experiencias de realidad virtual que se ejecutan en un navegador web en auriculares de realidad virtual, teléfonos móviles y tabletas y computadoras regulares. Este tutorial le dará a conocer el desarrollo WebVR mediante la creación de un juego de acción en primera persona que utiliza el marco de A-Frame. Para seguir adelante, se requieren conocimientos básicos de HTML y JavaScript. P>
No se pierda! extremos de la oferta en
- Accede a los más de 200 cursos li>
- Nuevos cursos añadió mensual li>
- Cancelar en cualquier momento li>
- Los certificados de terminación li>
Ul>
ACCESO ahora p>
Descargas h3>
Los archivos de este tutorial están disponibles para su descarga aquí. P>
¿Qué es A-Frame? H3>
A-Frame es un framework de desarrollo web front-end para el desarrollo de WebVR. Técnicamente, A-Frame es una abstracción de three.js, una biblioteca JavaScript que utiliza la API de WebGL para rendir gráficos 3D en el navegador. P>
Una aplicación A-Frame es simplemente una página web HTML que incluye la biblioteca A-Frame y contiene entidades incrustadas dentro de
a-escena> etiquetas. Este es el código completo para el “Hola, mundo” de A-Frame: p>
Hola, WebVR! – A-Frame title> a-box> posición a-esfera> a de cilindro-> a de plano> a-cielo> a-escena> body> < / html> p>
A-Frame utiliza la arquitectura de entidad-componente. Cada objeto en A-Frame es una entidad representada como una etiqueta HTML. Componentes que se parecen a los atributos HTML añadir comportamientos a las entidades. Algunos componentes, tales como la geometría, material y posición, se construyen en A-Frame. Usted puede crear sus propios componentes personalizados en JavaScript o utilizar componentes existentes del registro A-Frame. P>
entidades comunes son abstraído en primitivos, que son comparables a las casas prefabricadas en la unidad. A-cuadro, a-esfera, un cilindro, y un plano son todas las primitivas. P>
Configuración de un Proyecto h3>
Desarrollar y probar en A-Frame es más fácil ifwe ejecutar un servidor web local, en lugar de utilizar el menú Archivo-> Abrir en un navegador para abrir una página. Hay varias formas de ejecutar un servidor local, pero vamos a utilizar de nodo y NPM, el gestor de paquetes de nodo. Siga las instrucciones en https://nodejs.org/en/download/ para descargar e instalar el Nodo y NPM para su sistema. P>
Para configurar el proyecto, crear un directorio llamado a-fps y crear un archivo llamado un-cps / package.json con el siguiente contenido: p>
{ "Name": "a-fps", "Descripción": "A-Frame Shooter en primera persona", "versión": "0.1.0", "licencia": "MIT", "scripts": { "inicio ": "budo --live --verbose --port 3000 --open"}, "devDependencies": { "budo": "^ 7.0.0"}, "palabras clave": [ "aframe", "webvr", "vr"]} 1234567891011121314151617 { "name": "a-fps", "Descripción": "a-Frame shooter en primera persona", "versión": "0.1.0", "licencia": "MIT"," scripts ": {" Inicio ":" budo --live --verbose --port 3000 --open "}," devDependencies ": {" budo ":" ^ 7.0.0 "}," palabras clave ": [" aframe ", "webvr", "VR"]}Ahora ejecute p>
NPM instalaren su terminal en el directorio de un fps. Esto instalará el paquete budo que aparece como una dependencia en package.json. Budo es un servidor web de desarrollo. Cuando se ejecuta p>
NPM empezaren su terminal, budo se iniciará un servidor web en el puerto 3000. Prueba de sus páginas web en el directorio donde se está ejecutando el budo, vaya a http: // localhost:. 3000 en su navegador p>
Todos los depencies se instalan en el directorio node_modules. P>
Creación de una escena h3>
A-Frame, escenas están encerrados en
a-escena> etiquetas. Cada objeto en la escena es una entidad identificada por a-entidad> etiquetas, con componentes añadidos como atributos del etiqueta. P>
establecer Empecemos nuestra escena. Crear un nuevo archivo, index.html, en el directorio de su proyecto, y abrirlo en un editor de código o IDE. Estoy utilizando código de Visual Studio -. Otras opciones incluyen Atom, Sublime Text, o vim clásico o Emacs p>
Crea un archivo HTML esqueleto en index.html: p>
Add las siguientes líneas a GameManagerUtils.createEnemy () en juego -manager.js antes se devuelve newEnemy: p>
var destinationStr = '0' + position.y.toString () + '0'; newEnemy.setAttribute ( 'animación', { 'propiedad': 'posición', 'a': destinationStr, 'autoplay': true, dur: 10000}); 12345vardestinationStr = '0 '+ position.y.toString () +' 0'; newEnemy.setAttribute ( 'animación', { 'propiedad': 'posición', 'a': destinationStr, 'autoplay': true , dur: 10000});Esto anima la posición del enemigo, moviéndolo a las coordenadas representadas por destinationStr. Dado que la cámara está en (0, 0, 0), el enemigo se moverá hacia el origen, pero no cambiará su posición Y. La función de reproducción automática parámetro controla si la animación se inicia automáticamente. El dur, o duración, el parámetro, es la longitud de cada ciclo de animación en milisegundos. Ajustarlo con ensayo y error para obtener la velocidad deseada. P>
p>
Conclusión h3>
Ahora que nos hemos familiarizado con los conceptos básicos de la A-Frame y ha creado un simple tirador WebVR, estamos listos para ver las funciones más avanzadas, como trabajar con los controladores de realidad virtual, que aparezcan los menús, y la adición de diferentes entornos. Vamos a explorar estos temas la próxima vez ya profundizar más en la A-Frame. P>
Mensajes relacionados h3>