Zum Inhalt springen
Logo TechLab Blog

TechLab Blog

A-Frame

Der heutige TechLab Abend (Mittwoch 14.11.2018) wurde nochmals von Martin Vollenweider, Dozierender beim Multimedia Production Studiengang an der HTW Chur, geleitet. Das Thema war A-Frame.

A-Frame ist ein Web Framework von der Mozilla Cooperation, womit sich sehr einfach Virtual Reality Anwendungen erstellen lassen. Die Grundstruktur ist sehr ähnlich wie HTML, dass heisst wer HTML kennt, kann auch A-Frame. Aber auch wer keine HTML Erfahrungen, findet sich schnell zurecht.

Wir waren zu fünft an diesem Abend. Martin zeigte uns, wie man eine Kugel mit A-Frame zeichnet, wie man diese dann in der Grösse ändert, die Farbe wechselt, und sie dann mittels einer vorgefertigten Grafik texturiert. Noch ein passendes Hintergrundbild, Rotation der Kugel und schon ist das Weltall mit dem Planeten Erde gebaut.

<!-- Rote Kugel -->
<a-sphere src="images/sun.jpg" position="0 0 -5" rotation="" scale="" visible="" material="" geometry="">
</a-sphere>
<a-sphere src="images/earth.jpg" position="0 3 -3" rotation="" scale="" visible="" material="" geometry="">
<a-animation attribute="rotation" to="0 360 0" dur="30000" repeat="indefinit" easing="linear">
</a-animation>
</a-sphere>
<a-box color="green" width="0.5" height="0.7" depth="1.4" position="-3 0 -5" rotation="" scale="" visible="" material="" geometry="">
</a-box>
<a-sky src="images/sky_background.jpg" position="" rotation="" scale="" visible="" material="" geometry="">
</a-sky>

Das A-Frame Projekt konnten wir dann in der Oculus Go direkt betrachten. Der Wow-Effekt war gross, denn das Weltall kommt in der virtuellen Realität viel besser zur Geltung als einfach so als flaches Bild.

Es lohnt sich, etwas Zeit mit A-Frame zu verbringen, denn man kann in kurzer Zeit viel machen. Hier noch ein Link zu einem A-Frame Repository. https://aframe.io/docs/0.8.0/introduction/. Wir alle waren sehr zufrieden am Ende des Abends und wollen sich wieder mal einen A-Frame TechLab Abend durchführen.

Handout des Abends: Handout Techlab A-Frame

Anzahl Kommentare 0
Kommentare