File size: 1,951 Bytes
6744e6e c0fd12b d92817a c0fd12b d92817a c0fd12b d92817a c0fd12b d92817a c0fd12b d92817a 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!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="objectsContainer"></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.generateObject(key);
}
});
},
generateObject: function (key) {
const objectsContainer = document.querySelector('#objectsContainer');
const object = document.createElement('a-entity');
// Set object properties and components
object.setAttribute('geometry', {
primitive: 'box',
width: 1,
height: 1,
depth: 1
});
object.setAttribute('material', { color: getRandomColor() });
object.setAttribute('position', getRandomPosition());
objectsContainer.appendChild(object);
}
});
// Helper function to generate random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Helper function to generate random position
function getRandomPosition() {
const x = Math.random() * 10 - 5;
const y = Math.random() * 10 - 5;
const z = Math.random() * 10 - 5;
return `${x} ${y} ${z}`;
}
</script>
</body>
</html> |