|
<!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> |