|
|
<!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> |
|
|
Here's an example of an A-Frame and Three.js demonstration that includes keyboard interaction, dynamically generated 3D letters, camera and WASD control, and a skybox with blue, yellow, and white chaos-driven visuals. Additionally, it includes a function to call a web service and display the results. |
|
|
|
|
|
```html |
|
|
<!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 |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
fetch('https://api11.salmonground-a8f39f59.centralus.azurecontainerapps.io/selftest') |
|
|
.then(response => response.json()) |
|
|
.then(data => console.log(data)); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
