A keyboard input based on THREE.js for virtual reality experiences or just as an alternative to the standard on-screen keyboard on touch devices.
Include THREE.js library and VRKeyboard:
<script src="libs/three.min.js"></script>
<script src="js/VRKeyboard.js"></script>Create a basic 3D scene:
<script>
var container;
var camera;
var scene, renderer;
var vrKeyboard;
function init(element){
container= document.getElementById(element);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
camera.position.set(0, 0, 1500);
camera.lookAt(new THREE.Vector3(0,0,0))
animate();
}
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
<body onload="init('container')">
<div id="container"></div>
</body>Instantiate a VRKeyboard passing a reference to current scene, camera and renderer:
var vrKeyboard = new VRKeyboard(scene, camera, renderer)Call the VRKeyboard update in the rendering loop:
function animate(){
vrKeyboard.update()
requestAnimationFrame(animate);
renderer.render(scene, camera);
}Listen for events:
vrKeyboard.addEventListener("keydown", function(e){
console.log("You pressed the: "+e.code+" key")
}Supported events are:
- keydown
- keyup
- keyover
- keyout
- keyhold (long press)
Add and layout VRTextInput instances as necessary, for example:
var usernameTxt = new VRTextInput();
usernameTxt.width = 400;
usernameTxt.position.set(0,300,0);
var passwordTxt = new VRTextInput();
passwordTxt.width = 400
passwordTxt.position.set(0,220,0);
passwordTxt.displayAsPassword = true;Register VRTextInput instances to the VRKeyboard:
vrKeyboard.addField(usernameTxt);
vrKeyboard.addField(passwordTxt);Registered fields automatically receive focus when clicked.
To set focus programmatically assign it as target of the VRKeyboard:
vrKeyboard.target = usernameTxt;Then type something and get the VRTextInput value, e.g.:
vrKeyboard.addEventListener("keydown", function(e){
if(e.code == Unicode.ENTER){
console.log(usernameTxt.value);
}
}VRKeyboard exposes the following attributes for basic customization:
- keyColor
- keyDownColor
- labelColor
- labelDownColor
- borderColor
- borderDownColor
- borderRadius
Example:
//Red key background with yellow labels and no rounded corners
vrKeyboard.keyColor="#D90000";
vrKeyboard.labelColor="#FFD24D";
vrKeyboard.borderColor="#FFD24D";
vrKeyboard.keyDownColor="#B20000";
vrKeyboard.labelDownColor="#FFBF00";
vrKeyboard.borderDownColor="#D90000";
vrKeyboard.borderRadius=0VRTextInput styling woks similar:
//Red background with yellow text and no rounded corners
searchTxt.backgroundColor="#D90000";
searchTxt.textColor="#FFD24D"
searchTxt.borderColor="#FFD24D";
searchTxt.backgroundFocusColor="#B20000";
searchTxt.textFocusColor="#FFBF00"
searchTxt.borderFocusColor="#FF0000";
searchTxt.borderRadius=0If you want to go more in depth on styling and customizing, have a look at the draw() and drawKey() methods.