Skip to content

Instantly share code, notes, and snippets.

@scottlittle
Last active March 13, 2017 14:17
Show Gist options
  • Save scottlittle/a29ced2b370f98516f16b24e618b243a to your computer and use it in GitHub Desktop.
Save scottlittle/a29ced2b370f98516f16b24e618b243a to your computer and use it in GitHub Desktop.
Text attribute control in A-Frame
license: mit

Using JQuery with the new version (0.5.0) of A-Frame, we can select a cube and change its attributes (like color) when an event happens (mouseenter, mouseleave).

Built with blockbuilder.org

<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('scale-on-mouseenter', {
schema: {
to: {default: '2.5 2.5 2.5'}
},
init: function () {
var data = this.data;
this.el.addEventListener('mouseenter', function () {
//this.setAttribute('scale', data.to);
$(this).find("a-text").attr('color', 'green');
});
}
});
</script>
<script>
AFRAME.registerComponent('scale-on-mouseleave', {
schema: {
to: {default: '2.5 2.5 2.5'}
},
init: function () {
var data = this.data;
this.el.addEventListener('mouseleave', function () {
//this.setAttribute('scale', data.to);
$(this).find("a-text").attr('color', 'red');
});
}
});
</script>
<a-scene>
<a-assets>
<a-mixin id="text"
text="align: center; width: 6;
value: Hello World!"
></a-mixin>
</a-assets>
<a-box position="0 0 0" rotation="0 15 0" width="1" height="1" depth="1" color="#4CC3D9" scale-on-mouseenter="to: 2.2 2.2 2.2" scale-on-mouseleave="to: 2.2 2.2 2.2">
<a-text mixin="text" position="0 1 0" wrap-count="20" color='red'></a-text>
</a-box>
<a-box position="3 0 0" rotation="0 15 0" width="1" height="1" depth="1" color="#4CC3D9" scale-on-mouseenter="to: 2.2 2.2 2.2" scale-on-mouseleave="to: 2.2 2.2 2.2">
<a-text mixin="text" position="0 1 0" wrap-count="20" color='red'></a-text>
</a-box>
<a-entity position="0 2 5">
<a-entity camera look-controls wasd-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
</a-entity>
</a-entity>
</a-entity>
</a-scene>
<body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment