Skip to content

Instantly share code, notes, and snippets.

@papplo
Last active March 11, 2022 07:17
Show Gist options
  • Save papplo/46f73407b2ce185f62b1d9e930566cc0 to your computer and use it in GitHub Desktop.
Save papplo/46f73407b2ce185f62b1d9e930566cc0 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<meta charset="utf-8">
<title>A-Frame demo</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
event-set__enter="_event: mouseenter; color: #8FF7FF"
event-set__leave="_event: mouseleave; color: #4CC3D9"></a-box>
<a-plane
src="QL_Logo_Blue.png"
position="1 -2 -17"
rotation="-0 0 0"
width="40" height="9"
color="transparent">
</a-plane>
<a-text id="cylinderText" value="This is a-text" align="center" color="#000" visible="true" position="-1 1.5 -3" rotation="0 05 -10"
geometry="primitive: plane; width: 1.75" material="color: #FFF"></a-text>
<a-plane src="Highlevels_Green_Small.png"
position="1 -2 -50"
width="400"
height="400"></a-plane>
<a-sky color="#fff"></a-sky>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
</html>

Prelude

So im taking on a role at my current job as a developer with shared responsibilities for onboarding and coaching new members in our developer teams. I will need to take on more and learning and teaching as a part of my role, thus i need to brush up on some basics, as well as getting accustomed to do research on general topics and more specific themes in the current field of web development. This is why i recently started documenting my findings on web technology topics. In short form, stored as gist md-documents.

TIL: WebApi's pt1: A-Frame

Today-I-Learned was inspired by fellow developers who write and share their thoughts on teir respective work experience. *Tatiana Mac

TLDR; Mozilla's A-Frame framework link provides a markup language allowing you to build 3D VR landscapes using a familiar system, following game development and coding principles. It's a short track to create successful mvp-cases without dabbling to much in GLSL (shaders) etc.

A-Frame is built on top of WebGL, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc. It is based on the entity component system, which is known in the game development world, but it targets web developers with a familiar markup structure, manipulable with JavaScript. The end result is 3D web experiences, which are VR-enabled by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment