TALLER PRÁCTICO
Imanol Terán Maruri - @itermar
Caricatura realizada por @oneeyedman
Con el código #EE26
50%
DESCUENTO
La realidad virtual es un entorno de escenas u objetos de apariencia real. La acepción más común refiere a un entorno generado mediante tecnología informática, que crea en el usuario la sensación de estar inmerso en él. Dicho entorno es contemplado por el usuario a través de un dispositivo conocido como gafas o casco de realidad virtual. Este puede ir acompañado de otros dispositivos, como guantes o trajes especiales, que permiten una mayor interacción con el entorno así como la percepción de diferentes estímulos que intensifican la sensación de realidad.
La realidad aumentada (RA) es el término que se usa para definir la visión de un entorno físico del mundo real, a través de un dispositivo tecnológico, es decir, los elementos físicos tangibles se combinan con elementos virtuales, logrando de esta manera crear una realidad aumentada en tiempo real. Consiste en un conjunto de dispositivos que añaden información virtual a la información física ya existente, es decir, añadir una parte sintética virtual a la real.
<CTRL>+<ALT>+i
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
$ npm install aframe
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
<a-scene>
<a-box position="0 0 0" color="lightgreen" rotation="0 45 45"
width="5" height="5"></a-box>
</a-scene>
* Siempre subir sobre HTTPS
<a-scene>
<a-box src="ruta_de_la_imagen" position="0 2 -5" rotation="0 45 45"
scale="2 2 2"></a-box>
</a-scene>
<a-scene>
<a-assets>
<img id="boxTexture" src="ruta_de_la_imagen">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
</a-scene>
<a-plane rotation="-90 0 0"></a-plane>
<a-assets>
<!-- ... -->
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<!-- ... -->
</a-assets>
<!-- ... -->
<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"></a-plane>
<!-- ... -->
<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
repeat="10 10"></a-plane>
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-light type="point" intensity="2" position="2 4 4"></a-light>
</a-scene>
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
repeat="indefinite"></a-animation>
</a-box>
</a-scene>
<a-animation attribute=“rotation” repeat=“indefinite” to=“0 360 0”></a-animation>
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
<a-scene>
<a-assets>
<a-asset-item id="tree" src="tree.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#tree"></a-collada-model>
</a-scene>
<a-scene>
<a-assets>
<a-asset-item id="tree" src="tree.gltf">
</a-assets>
<a-gltf-model src="#tree"></a-gltf-model>
</a-scene>
<a-scene>
<a-assets>
<a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
<a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
</a-scene>
<a-text value="Kaixo, Enpresa Digitala!" color="#BBB"
position="-0.9 0.2 -3" scale="1.5 1.5 1.5"></a-text>
<a-scene>
<a-assets>
<audio src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay
preload></audio>
</a-assets>
<!-- ... -->
</a-scene>
<a-scene>
<!-- ... -->
<a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
position="-3 1 -4"></a-sound>
<!-- ... -->
</a-scene>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
<a-entity event-set__${id}="_event: ${eventName}; ${someProperty}: ${toValue}">
<a-entity event-set__makevisible="_event: mouseenter; visible: true">
<a-scene embedded arjs>
<a-marker-camera preset='hiro'></a-marker-camera>
Para poder trabajar con AR.js, importamos la librería y la aplicamos en nuestra escena
Después, hay que decirle a AFRAME que queremos que AR.js controle la cámara
<!-- A-Frame -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- Contenido-->
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<!-- cámara que se mueve en función de la posición del marcador -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
<!-- define your gltf asset -->
<a-assets>
<a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item>
</a-assets>
<!-- use your gltf model -->
<a-entity gltf-model="##tree"></a-entity>
<a-text value="Hello, World!"></a-text>
<a-image src="another-image.png"></a-image>
Podemos personalizarlo