poetic:vrboiler-plate

v0.0.5Published 10 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

namesspace has changed from poeticsystems to poetic

To install

A wrapper around the repo https://github.com/borismus/webvr-boilerplate for meteor.

To use type meteor add poetic:vrboiler-plate

  • Run meteor update before adding package to avoid dependency issues.

Example usage

To see it in action add this to your javascript as an example usage

  window.onload = function(){

    //Setup three.js WebGL renderer
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);

    // Append the canvas element created by the renderer to document body element.
    document.body.appendChild(renderer.domElement);

    // Create a three.js scene.
    var scene = new THREE.Scene();

    // Create a three.js camera.
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.3, 10000);

    // Apply VR headset positional data to camera.
    var controls = new THREE.VRControls(camera);

    // Apply VR stereo rendering to renderer.
    var effect = new THREE.VREffect(renderer);
    effect.setSize(window.innerWidth, window.innerHeight);

    // Create a VR manager helper to enter and exit VR mode.
    var manager = new WebVRManager(renderer, effect, {hideButton: false});

    // Create 3D objects.
    var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
    var material = new THREE.MeshNormalMaterial();
    var cube = new THREE.Mesh(geometry, material);

    // Position cube mesh
    cube.position.z = -1;

    // Add cube mesh to your three.js scene
    scene.add(cube);

    // Request animation frame loop function
    function animate() {
      // Apply rotation to cube mesh
      cube.rotation.y += 0.01;

      // Update VR headset position and apply to camera.
      controls.update();

      // Render the scene through the manager.
      manager.render(scene, camera);

      requestAnimationFrame(animate);
    }

    // Kick off animation loop
    animate();

    // Reset the position sensor when 'z' pressed.
    function onKey(event) {
      if (event.keyCode == 90) { // z
        controls.resetSensor();
      }
    };

    window.addEventListener('keydown', onKey, true);

    // Handle window resizes
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      effect.setSize( window.innerWidth, window.innerHeight );
    }

    window.addEventListener('resize', onWindowResize, false);
  }