A-Frame + AR.js
WebVR + AR
- ¿Qué es A-Frame?
- Introducción al Framework
- Integrando ARjs
- Generación de markers
- Creando nuestra escena de realidad aumentada
- ¿Preguntas?
¿Qué es A-Frame?
- Creado por el equipo de Mozilla VR
- En la actualidad es desarrollado por Supermedium/Google
- Framework Web para VR
- Soporte para HeadSets
- Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go
- Realidad Aumentada
Introducción al Framework
¿Cómo puedo usarlo?
<html>
<head>
<script src="js"></script>
</head>
<body>
<a-scene>
...
</a-scene>
</body>
</html>Primitivas
<a-primitive
position="x y z"
scale="x y z"
rotation="x° y° z°"
radius="m"
width="m"
height="m"
depth="m"
color|src
>
</a-primitive>Assets
<a-assets>
<a-asset-item id="" src=""></a-asset-item>
<img id="" src="">
<audio id="" src=""></audio>
<video id="" src=""></video>
</a-assets>Animaciones y Texto
<a-box
animation=
"property: rotation; from; to; loop; dir;"
>
</a-box>
<a-entity
position="2 1.5 -2"
text="width: 3; value: WebVR;"
>
</a-entity>Escena y Camara
<a-scene>
...canvas, render, render loop
...default camera, lights
...webvr-polyfill
...UI enter VR WebVR API
</a-scene><a-scene stats vr-mode-ui>
</a-scene><a-entity
camera="active: true"
look-controls
wasd-controls
position="-2 1.6 2"
>
</a-entity>Speech Recognition
<a-box
position="-1 2 -5"
rotation="45 45 0"
width="1"
height="1"
depth="1"
src="#ibgjs"
speech-command__move="
command: mover cubo;
type: attribute; attribute: position; value: -3 5 -2;"
>
</a-box>
<a-entity
id="annyang"
annyang-speech-recognition
>
</a-entity>ARjs
<script
src="./aframe.min.js">
</script>
<script
src="./aframe-ar.min.js">
</script>¿Cómo integrarlo?
<a-scene
embedded
arjs="sourceType: webcam"
>
<a-marker type="pattern" url="/pattern-atom.patt">
<a-entity
gltf-model="/silicon-atom.glb"
scale="0.25 0.25 0.25"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene><a-marker preset='hiro'></a-marker>
<a-marker preset='kanji'></a-marker>Markers
<a-marker type="pattern" url="/pattern-atom.patt">
</a-marker>
<a-marker type="barcode" value="7">
</a-marker><a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
<a-marker type='pattern' url='http://examples.org/kanji.patt'></a-marker><a-marker preset='hiro'>
<a-box></a-box>
<img />
<a-entity gltf-model></a-entity>
</a-marker>