TALLER PRÁCTICO
Imanol Terán Maruri - @itermar
Caricatura realizada por @oneeyedman
Con el código ENPRESADIGITALA
1 MES
GRATIS
<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