https://github.com/mflux/three-vr-viewer

One-liner to start THREE.js WebVR projects.
https://github.com/mflux/three-vr-viewer

Last synced: 4 months ago
JSON representation

One-liner to start THREE.js WebVR projects.

• Host: GitHub
• URL: https://github.com/mflux/three-vr-viewer
• Owner: mflux
• Created: 2016-09-05T21:10:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-14T05:43:58.000Z (almost 8 years ago)
• Last Synced: 2024-08-10T17:24:11.050Z (4 months ago)
• Language: JavaScript
• Size: 2.04 MB
• Stars: 62
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## THREE.js VR Viewer

![Preview Image](http://i.imgur.com/OGgcuQU.png)

One-liner to start THREE.js WebVR projects. This project serves as a super beginner friendly way to build WebVR experiments.

Works for [WebVR enabled Chromium](https://webvr.info/get-chrome/) and [Firefox Nightly](https://nightly.mozilla.org).

## Setup ##

Include the script from build/three-vr-viewer.js in your project, after THREE.js

    

    

In your own project:

    VRViewer({THREE});

That's literally it.

Please note you have to pass in an existing THREE.js.

## Exposing THREE.js objects ##

**VRViewer()** returns several objects. You can destructure this object like so:

    const { scene, camera, renderer, events, toggleVR, controllers, vrEffect } = VRViewer({THREE});

Now you have access to the scene, camera, etc.

The Events object can run callbacks, for example, if you want something to change every frame:

    events.on( 'tick', function( dt ){

      box.rotation.x += 0.4 * dt;

    });

You're also given the VR controllers, if present, as an array of **controllers[]**. They are, for the time being, [THREE.ViveController](https://github.com/mrdoob/three.js/blob/dev/examples/js/ViveController.js) objects so you can bind events to them like:

      controllers[0].addEventListener('triggerdown', function(){

        console.log('controller trigger pressed!');

      });

## Options ##

**VRViewer()** can take several options:

- **antiAlias:** (default true). Anti-aliasing. This reduces performance if on.

- **clearColor:** (default 0x505050). Hexadecimal for background color.

- **emptyRoom:** (default true). Creates an empty room so you're not floating in space.

- **standing:** (default true). Whether or not VRControls is a standing experience.

- **loadControllers:** (default true). Attempts to load controller models.

- **vrButton:** (default true). Whether or not to show the "Enter VR" button.

- **pathToControllers:** (default 'models/obj/vive-controller/'). Path where the Vive controller model is located. In case you need to override it.

- **controllerModelName:** (default 'vr_controller_vive_1_5.obj'). Filename of the Vive controller model. In case you need to override it.

- **controllerTextureMap:** (default 'onepointfive_texture.png'). Filename of the Vive controller texture map.

- **controllerSpecMap:** (default 'onepointfive_spec.png'). Filename of the Vive controller specular map.

For example:

    VRViewer({

      THREE,

      emptyRoom: true

    });

This automatically enters VR and enables the empty room.

## Installing from NPM

    npm install

    npm run dev

## Examples ##

[Start a web server](http://www.2ality.com/2014/06/simple-http-server.html) at three-vr-viewer/example and then navigate to localhost:8000

## Notes ##

* The module requires that you pass in a copy of THREE.js. Meaning you should have included it with  tag.

* You can also include this as an ES6 module directly by doing

    import create from 'VRViewer' if you're installing it from NPM.