https://github.com/mkeblx/vr-tmpl

Basic threejs WebVR template
https://github.com/mkeblx/vr-tmpl

Last synced: about 2 months ago
JSON representation

Basic threejs WebVR template

• Host: GitHub
• URL: https://github.com/mkeblx/vr-tmpl
• Owner: mkeblx
• License: mit
• Created: 2014-07-24T04:22:57.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-10-20T23:01:00.000Z (about 9 years ago)
• Last Synced: 2023-08-08T05:35:40.769Z (over 1 year ago)
• Language: JavaScript
• Size: 1.43 MB
• Stars: 6
• Watchers: 5
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
VR Three.js template

===================

Using WebVR native browser support

Basic player object that add to scene.

Works with Oculus DK2 when paired with a browser build that supports WebVR.

### Usage

```html

```

```js

var renderer;

var scene;

// player object: only manipulate this position & orientation, don't modify camera directly

var player, head;

var initialPos = { x: 0, y: 0, z: 30 };

var vrHMD;

var vrPlayerController;

var options = {

    scale: 1, // eye separation (IPD) scale

    posScale: 10 // positional tracking scale

  };

// detect VR headsets

vrHMD = new THREE.VRHMD( load );

function load( error ) {

  if ( error ) {

    console.log( error );

  }

  init();

  animate();

}

function init() {

  scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );

  // initialize player controller

  vrPlayerController = new THREE.VRPlayerController( vrHMD, options, renderer, camera );

  player = vrPlayerController.player;

  player.position.copy( initialPos );

  // note: must add player to scene

  scene.add( player );

  // can access head object for attaching a fixed HUD

  // (although generally against best practices)

  // or getting orientation

  head = vrPlayerController.head;

}

function animate( t ){

  requestAnimationFrame( animate );

  var dt = clock.getDelta();

  update( dt );

  render( dt );

}

function update() {

  // player.position = ...

  // updates player head position and orientation based on HMD

  vrPlayerController.update( dt );

}

function render( dt ) {

  vrPlayerController.render( scene );

}

```

### Credits

Three.js : http://github.com/mrdoob/three.js

WebVR polyfill : http://github.com/borismus/webvr-polyfill