DHOB (IU5SGN): AFrame

mercoledì 20 giugno 2018

Laser control e raycaster su Aframe

Per poter interagire con gli oggetti su Aframe si puo' utilizzare il laser-control, un componente che mostra un raggio laser che viene emesso dal controller (sia questo DayDream od Oculus) e che puo' interagire con gli oggetti della scena

Il laser-control puo' essere aggiunto con la semplice riga

<a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>

e' importante inserire la entity in un rig che contenga anche l'oggetto camera in modo che il raggio laser parta sempre come origine dalla camera. E' inoltre importante indicare quali sono gli oggetti con cui il raggio interagira' mediante il comando raycaster

Nell'esempio viene creata una scena con un cubo ed un piano con una texture trasparente. Dopo che l'utente clicca sul cubo con in controller Daydream la texture del piano perde la trasparenza

-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laser Controls</title>
<meta name="description" content="Laser Controls - A-Frame">
<script src="aframe-master.js"></script>

</head>
<body>

<script>
AFRAME.registerComponent('laser-listener', {
init: function () {

var self = this;
var el = this.el;

this.el.addEventListener('mousedown', function (evt) {
document.querySelector('#cube').setAttribute('material', 'color', '#EF2D5E');
document.querySelector('#piano').setAttribute('material','opacity',1.0);
});
this,el.addEventListener('mouseup', function (evt) {
el.setAttribute('material', 'color', self.isMouseEnter ? '#24CAFF' : initialColor);
document.querySelector('#piano').setAttribute('material','opacity',1.0);
});

}
});

</script>

<a-scene auto-enter-vr background="color: #212" antialias="true">
<a-entity id="rig" movement-controls="fly: true; speed: 30" position="300 50 140" rotation="0 45 0">
<a-entity position="50 30 410" camera look-controls wasd-controls></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" raycaster="objects:#cube"></a-entity>
</a-entity>

<a-assets>
<img id="grafico" src="./sposta.jpg">
<img id="trasparente" src="./trasparente.png">
</a-assets>

<a-plane id="piano" src="#grafico" material="opacity:0.0" position="270 40 -10" rotation="0 20 0" width="100" height="60" scale="" visible="" geometry=""></a-plane>
<a-entity laser-listener position="230 7 15" id="cube" geometry="primitive: box; width: 5.5; height: 5.5; depth:5.5" material="color: red"></a-entity>

</a-scene>
</body>
</html>

giovedì 17 maggio 2018

Modello digitale del terreno con AFrame e Daydream controller

Tramite il framework Aframe e' possibile visualizzare su un comune browser un modello digitale del terreno in formato OBJ/MTL e poterlo navigare/ruotare con il controller nativo di Daydream

ATTENZIONE : per abilitare il controller Daydream si deve inserire nella url di Chrome la seguente stringa

chrome://flags

e si devono attivare gli switch WebVR e Gamepad API

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

<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>

<a-scene background="color: green">

<a-entity id="rig"
movement-controls="fly: true; speed: 0.3"
position="15 0 15">
<a-entity camera
position="0 1.6 0"
look-controls></a-entity>
</a-entity>

<a-assets>
<a-asset-item id="dem-obj" src="Ricasoli_nord.obj"></a-asset-item>
<a-asset-item id="dem-mtl" src="Ricasoli_nord.mtl"></a-asset-item>
</a-assets>

<a-entity position="3 6 2" rotation="90 180 270" obj-model="obj: #dem-obj; mtl: #dem-mtl"></a-entity>

</a-scene>
</body>
</html>