aframe-xterm-component
Version:
Playing around with getting xterm.js working in Aframe VR
64 lines (56 loc) • 1.7 kB
HTML
<meta charset='utf-8'>
<title>aframe-xterm-component</title>
<link rel="stylesheet" href="//unpkg.com/xterm@3.12.0/dist/xterm.css" />
<script src="//unpkg.com/xterm@3.12.0/dist/xterm.js"></script>
<script src="//aframe.io/releases/0.9.0/aframe.min.js"></script>
<script type="text/javascript" src="aframe-xterm-component.js"></script>
<script type="text/javascript">
AFRAME.registerComponent('xterm-example', {
dependencies: ['xterm'],
init: function() {
const message = 'Run \x1B[1;3;31m\'node server.js\'\x1B[0m to open a shell\r\n'
const xterm = this.el.components['xterm']
xterm.write(message)
const socket = new WebSocket('ws://localhost:8080/')
// Listen on data, write it to the terminal
socket.onmessage = ({data}) => {
xterm.write(data)
}
socket.onclose = () => {
xterm.write('\r\nConnection closed.\r\n')
}
// Listen on user input, send it to the connection
this.el.addEventListener('xterm-data', ({detail}) => {
socket.send(detail)
})
}
})
</script>
<a-scene antialias="true" background="color: #101010">
<a-curvedimage
class="terminal"
xterm-example
theta-length="60"
radius="6"
height="4"
rotation="0 150 0"
position="0 2 -2"
></a-curvedimage>
<a-entity wasd-controls>
<a-entity
camera
look-controls
position="0 1.6 0"
></a-entity>
<a-entity
cursor="rayOrigin: mouse"
raycaster="objects: .terminal"
></a-entity>
<a-entity
hand-controls
laser-controls
raycaster="objects: .terminal"
></a-entity>
</a-entity>
</a-scene>