aframeEmpezando con aframe

Observaciones

Esta sección proporciona una descripción general de qué es un marco y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande dentro de un marco, y vincular a los temas relacionados. Dado que la Documentación para aframe es nueva, es posible que deba crear versiones iniciales de los temas relacionados.

Versiones

A-Frame 0.x

Versión Fecha de lanzamiento
0.6 2017-05-25
0.5 2017-02-10
0.4 2016-12-17
0.3 2016-08-18

Versiones heredadas

Versión Fecha de lanzamiento
0.2 2016-03-26
0.1 2015-12-17

Caracteristicas

VR Made Simple

Solo suelta una etiqueta de script y a-scene . A-Frame manejará la placa de calderas 3D, la configuración de VR y los controles predeterminados. Nada para instalar, no hay pasos de compilación.

HTML declarativo

HTML es fácil de leer, entender y copiar y pegar. Al estar basado en HTML, A-Frame es accesible para todos: desarrolladores web, entusiastas de la realidad virtual, artistas, diseñadores, educadores, creadores, niños.

VR multiplataforma

Cree aplicaciones de VR para Vive, Rift, Daydream, GearVR y Cardboard con soporte para todos los controladores respectivos. ¿No tienes auriculares o controladores? ¡No hay problema! A-Frame todavía funciona en computadoras de escritorio y teléfonos inteligentes estándar.

Arquitectura Entidad-Componente

A-Frame es un marco poderoso de three.js, que proporciona una estructura de componentes de entidad declarativa, compostable y reutilizable. HTML es solo la punta del iceberg; los desarrolladores tienen acceso ilimitado a JavaScript, API de DOM, three.js, WebVR y WebGL.

Actuación

A-Frame está optimizado desde cero para WebVR. Mientras que A-Frame usa el DOM, sus elementos no tocan el motor de diseño del navegador. Todas las actualizaciones de objetos 3D se realizan en memoria con poca sobrecarga en una sola llamada requestAnimationFrame. Para referencia, vea A-Painter, un clon de Pincel de Inclinación construido en A-Frame que se ejecuta como nativo (90+ FPS).

Herramienta agnóstica

Dado que la Web se creó con la noción de HTML, A-Frame es compatible con la mayoría de las bibliotecas, marcos y herramientas, incluyendo React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

Inspector visual

A-Frame proporciona un práctico inspector visual 3D incorporado. Abre cualquier escena de A-Frame, pulsa ctrl + alt + i , y vuela para mirar detrás del capó.

Inspector visual

Registro

Tome los componentes poderosos que los desarrolladores han publicado y conéctelos directamente desde HTML. Al igual que en la Tienda de Activos de Unity, el Registro A-Frame recopila y cura estos componentes para un fácil descubrimiento.

Componentes

Empiece a correr con los componentes principales de A-Frame, como geometrías, materiales, luces, animaciones, modelos, difusores de rayos, sombras, audio de posición, texto y controles Vive / Touch / Daydream / GearVR / Cardboard. Vaya aún más lejos con los componentes de la comunidad como sistemas de partículas, física, multiusuario, océanos, montañas, reconocimiento de voz, captura de movimiento, teletransportación, súper manos y realidad aumentada.

Empezando

¡A-Frame puede desarrollarse a partir de un archivo HTML simple sin tener que instalar nada! Una excelente manera de probar A-Frame para volver a mezclar el ejemplo de inicio en Glitch, un editor de código en línea que instantáneamente aloja y despliega de forma gratuita. O cree un archivo .html e incluya A-Frame en la head :

<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
 

Incluir la compilación de JS

Para incluir A-Frame en un archivo HTML, soltamos una etiqueta de script apunta a la compilación de CDN:

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
 

Instalar desde npm

También podemos instalar A-Frame a través de npm:

$ npm install aframe
 

Entonces podemos incluir A-Frame en nuestra aplicación. Por ejemplo, con Browserify o Webpack:

require('aframe');
 

Si usa npm, puede usar angle, una interfaz de línea de comandos para A-Frame. ángulo puede inicializar una plantilla de escena con un solo comando:

npm install -g angle && angle initscene
 

Empezando para AR

Para crear aplicaciones de AR en la web, debe agregar una nueva biblioteca llamada AR.js. Primero carga un cuadro A seguido de AR.js.

Newt, debe configurar su escena utilizando la etiqueta A a-scene con el artoolkit artoolkit agregado. El sourceType debe ser tu webcam. La fuente de la cámara de su teléfono inteligente también es compatible con esto.

El a-marker-camera marker marca una imagen dentro de la pantalla grabada que representa una imagen. En este caso es marker.png . Cuando la cámara detecte este marcador, el cuadro se mostrará en el marcador.

A continuación puede encontrar el código de ejemplo:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>