aframe Tutorial
Empezando con aframe
Buscar..
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 |
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
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ó.
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 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>