Installations

npm install threejs-vr-keyboard

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.11.1

NPM Version

6.0.0 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

1

JavaScript

JavaScript (100%)

Developer

byondrnd

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

89 Commits

3 Branches

Updated on Apr 19, 2021

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

1.0.9

Package Id

threejs-vr-keyboard@1.0.9

Unpacked Size

98.00 kB

Size

65.54 kB

File Count

5

NPM Version

6.0.0

Node Version

8.11.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

three

VRKeyboard

What is

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.

How to setup

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>

How to use

Basic:

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)

With VRTextInput/s in 3D space:

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);
    }
}

How to style

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=0

VRTextInput 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=0

If you want to go more in depth on styling and customizing, have a look at the draw() and drawKey() methods.

Examples

Basic, TextInputs, Styling and a Complete 3D Scene

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

2.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More