File size: 1,790 Bytes
6744e6e c0fd12b e2a660a c0fd12b e2a660a c0fd12b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aframe and Three.js Keyboard Interaction Demo</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
</head>
<body>
<a-scene keyboard-shortcuts>
<a-entity position="0 1.6 0">
<a-entity id="camera" camera look-controls wasd-controls></a-entity>
</a-entity>
<a-sky color="#0000ff"></a-sky>
<a-entity id="lettersContainer"></a-entity>
</a-scene>
<script>
AFRAME.registerComponent('keyboard-shortcuts', {
init: function () {
window.addEventListener('keydown', (event) => {
const key = event.key.toLowerCase();
if (key.length === 1 && /^[a-z]+$/.test(key)) {
this.generateLetter(key);
}
});
},
generateLetter: function (key) {
const lettersContainer = document.querySelector('#lettersContainer');
const letter = document.createElement('a-entity');
letter.setAttribute('text', { value: key.toUpperCase(), align: 'center', font: 'https://cdn.aframe.io/fonts/Exo2SemiBold.fnt', width: 2 });
letter.setAttribute('position', '0 1 -5');
letter.setAttribute('rotation', '0 0 0');
letter.setAttribute('scale', '1 1 1');
letter.setAttribute('letter', '');
lettersContainer.appendChild(letter);
}
});
AFRAME.registerComponent('letter', {
init: function () {
this.el.setAttribute('animation', { property: 'rotation', to: '0 360 0', dur: 2000, easing: 'linear', loop: true });
this.el.setAttribute('animation__position', { property: 'position', to: '0 1 20', dur: 2000, easing: 'linear', loop: true });
}
});
</script>
</body>
</html> |