examples/vr.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Threestrap - VR</title>
  <script type="text/javascript" src="../vendor/three.js"></script>
  <script type="text/javascript" src="../build/threestrap.js"></script>
  <script type="text/javascript" src="../vendor/renderers/VRRenderer.js"></script>
  <script type="text/javascript" src="../vendor/controls/DeviceOrientationControls.js"></script>
  <script type="text/javascript" src="../vendor/controls/OrbitControls.js"></script>
  <script type="text/javascript" src="../vendor/controls/VRControls.js"></script>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
  <script>

    // Bootstrap core + basic VR set up
    var three = THREE.Bootstrap({
      plugins: ['VR', 'ui', 'controls'],
      // Equivalent to:
      //   plugins: ['core', 'cursor', 'fullscreen', 'render:vr', 'ui', 'controls']
      controls: {
        klass: THREE.VRControls,
      },
    });

    // Random generator
    var sd = 12345;
    function rnd() {
      sd = (Math.abs(Math.sin(sd * 10000) * 1000)) % 1;
      return sd * 2 - 1;
    }

    // Insert cubes
    var colors = [
      new THREE.Color(0x3090FF),
      new THREE.Color(0x10A0FF),
      new THREE.Color(0x60109F),
    ];
    var n = colors.length;
    for (var i = 0; i < 500; ++i) {
      var sz = 1 + rnd() * .2;
      var mesh = new THREE.Mesh(new THREE.BoxGeometry(sz, sz, sz),
                                new THREE.MeshPhongMaterial({ color: colors[i % n] }));
      mesh.position.set(rnd() * 10, rnd() * 10, rnd() * 10);
      three.scene.add(mesh);
    }

    // Lights
    var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
    hemiLight.color.setHSL(0.6, 1, 0.6);
    hemiLight.groundColor.setHSL(0.095, 1, 0.75);
    hemiLight.position.set(0, 500, 0);
    three.scene.add(hemiLight);

    var dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.color.setHSL(0.1, 1, 0.95);
    dirLight.position.set(-1, 1.75, 1);
    dirLight.position.multiplyScalar(50);
    three.scene.add(dirLight);

  </script>
</body>
</html>