JavaScript HTML
Latest commit 903a143 Jan 19, 2017 @borismus committed on GitHub Merge pull request #18 from vizorvr/fix-remove
fix existence check in removal of objects
Permalink
Failed to load latest commit information.
build update build Dec 7, 2016
img add grid Oct 7, 2016
node_modules add three.js Nov 8, 2016
src fix existence check in removal of objects Jan 16, 2017
.gitignore allow three Nov 8, 2016
.nojekyll fixing gh-pages Nov 8, 2016
CONTRIBUTING ok Oct 10, 2016
COPYING ok Oct 10, 2016
README.md add optional second param to constructor Nov 8, 2016
daydream-simulator.html refactor Oct 5, 2016
index.html refactor Oct 5, 2016
index.js trying to get module working Oct 6, 2016
package.json uglify dev deps Dec 7, 2016

README.md

Ray Input: default WebVR interaction

Ray Input is a JavaScript library that provides an input abstraction for interacting with 3D VR content in the browser. It supports a variety of environments: desktop, mobile, and VR. In VR mode, behavior depends on if there's a motion controller, and whether the controller has positional tracking in addition to orientation tracking. For a higher level description of the library, see sane defaults for VR input.

Ray.js depends on THREE.js. You register interactive objects with Ray.js and subscribe to events on those objects. Events include:

  • raydown: an object is activated (eg. clicked)
  • rayup: an object is deactivated (eg. finger lifted)
  • raycancel: something stops activation (eg. you mouse-scroll to look around)
  • rayover: an object is selected (eg. hovered on, looked at)
  • rayout: an object is no longer selected (eg. blurred, looked away from)

Usage

Get the module from npm:

npm install ray-input

Then, in your code, import the ES6 module:

import RayInput from 'ray-input'

You can also use require.js:

require('./ray-input')

Or you can use the script standalone, but you may need to use new RayInput.default():

<script src="build/ray.min.js"></script>

API

How to instantiate the input library:

// Here, camera is an instance of THREE.Camera,
// If second HTMLElement arg is provided, it will be addEventListener'ed.
var input = new RayInput(camera, renderer.domElement);

How to register objects that can be interacted with:

input.add(object);

// Register a callback whenever an object is acted on.
input.on('raydown', (opt_mesh) => {
  // Called when an object was activated. If there is a selected object,
  // opt_mesh is that object.
});

// Register a callback when an object is selected.
input.on('rayover', (mesh) => {
  // Called when an object was selected.
});

How to unregister objects so that they can't be interacted with:

input.remove(object);

How to set basic attributes on the input system:.

// Sets the size of the input surface for ray casting. Generally this is
// the same as the renderer.domElement.
input.setSize(renderer.getSize());

// Update the input system in a game loop.
input.update();

Future

Open to pull requests that allow customization. Ideas include:

  • Adjust the length of the ray.
  • Specify the shape of the reticle.
  • Support for multiple controllers (especially 6DOF).
  • Support for left handed Daydream arm models.
  • Support a mode where only the closest object gets ray events. This has some implications. For example, when ray moves from background to foreground object, the background gets a rayout, while the foreground gets a rayover.