Skip to content

Instantly share code, notes, and snippets.

@hassanshaikley

hassanshaikley/wmx aframe

Created December 18, 2019 22:20
Show Gist options
  • Save hassanshaikley/c0ac7247839dd7af4fc6f82b35e2b649 to your computer and use it in GitHub Desktop.
Save hassanshaikley/c0ac7247839dd7af4fc6f82b35e2b649 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wmx aframe
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-text value="Weedmaps Exchange" position="-1 2 -3" color="#5bcabf"></a-text>
<a-entity text-geometry="value: Weedmaps Exchange; font: #dawningFont"></a-entity>
<a-assets>
<img src="https://i.imgur.com/4oeQAnc.jpg" id="grid" crossorigin="anonymous">
<img src="https://i.imgur.com/M4LVYXg.png" id="nug" crossorigin="anonymous" />
<img id="sky" src="https://i.imgur.com/KmwcZSV.jpg?1" crossorigin="anonymous" />
<a-asset-item id="dawningFont"
src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2FdawningOfANewDayRegular.typeface.json?1490305922844">
</a-asset-item>
<a-asset-item id="exoFont"
src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2Fexo2Black.typeface.json?1490305922150">
</a-asset-item>
<a-asset-item id="exoItalicFont"
src="https://cdn.glitch.com/c719c986-c0c5-48b8-967c-3cd8b8aa17f3%2Fexo2BlackItalic.typeface.json?1490305922725">
</a-asset-item>
</a-assets>
<a-entity position="-3 1 -6" rotation="5 0 0">
<a-entity rotation="0 0 5" position="0 2 0.2"
text-geometry="value: Virtual Reality; font: #dawningFont; bevelEnabled: true; bevelSize: 0.05; bevelThickness: 0.05; curveSegments: 12; size: 1; height: 0;"
material="color:lavenderblush; metalness:1; roughness: 0; sphericalEnvMap: #pink;"></a-entity>
<a-entity geometry="primitive: plane; width: 10000; height: 10000;" rotation="-90 0 0"
material="src: #grid; repeat: 10000 10000; transparent: true;metalness:0.6; roughness: 0.4; sphericalEnvMap: #sky;">
</a-entity>
<a-image src="#nug" position="-1 2 -3"></a-image>
<a-sky src="#sky" rotation="0 -90 0"></a-sky>
</a-scene>
<script>
var sceneEl = document.querySelector('a-scene');
AFRAME.registerComponent('do-something-once-loaded', {
iteration: 0,
init: function () { setTimeout(this.loop.bind(this), 25) },
loop: function () {
this.updateText()
setTimeout(this.loop.bind(this), 25)
},
updateText: function () {
var sceneEl = document.querySelector('a-scene');
const text = sceneEl.querySelectorAll('a-text')[0]
const position = text.getAttribute('position')
const y = 2 + .025 * position.y + Math.sin(this.iteration / 20)
text.setAttribute('position', { x: position.x, y: y, z: position.z })
this.iteration++;
}
});
sceneEl.setAttribute('do-something-once-loaded', '');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment