examples/hello_vr.html

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
  <script src="three.js"></script>
  <script src="inflate.min.js"></script>
  <script src="FBXLoader.js"></script>
  <script>
    let model;

    function init() {
      container = document.createElement('div');
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 0, 1);
      camera.lookAt(new THREE.Vector3());

      scene = new THREE.Scene();
      scene.matrixAutoUpdate = false;
      // scene.background = new THREE.Color(0x3B3961);

      const ambientLight = new THREE.AmbientLight(0x808080);
      scene.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);

      /* (() => {
        const geometry = new THREE.BoxBufferGeometry(0.1, 1, 0.1);
        const material = new THREE.MeshPhongMaterial({
          color: 0xE91E63,
        });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = 0.5;
        mesh.frustumCuled = false;
        scene.add(mesh);
      })();
      (() => {
        const geometry = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
        const material = new THREE.MeshPhongMaterial({
          color: 0x4CAF50,
        });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.y = 1 + 0.1;
        mesh.frustumCulled = false;
        scene.add(mesh);
      })();
      (() => {
        const geometry = new THREE.BoxBufferGeometry(0.1, 0.1, 0.1);
        const material = new THREE.MeshPhongMaterial({
          color: 0x29B6F6,
        });
        const mesh = new THREE.Mesh(geometry, material);
        // mesh.position.y = 0.1;
        // mesh.position.z = -0.5;
        mesh.frustumCulled = false;
        scene.add(mesh);
      })(); */

      // console.log('load model 1');
      const loader = new THREE.FBXLoader();
      loader.load('exokit.fbx', object => {
        // console.log('load model 2', !!object);

        /* object.quaternion.setFromUnitVectors(
          new THREE.Vector3(0, 0, 1),
          new THREE.Vector3(0.5, 0, 1).normalize()
        ); */
        object.scale.multiplyScalar(0.001);
        object.matrix.compose(object.position, object.quaternion, object.scale);
        object.updateMatrixWorld(true);
        // object.frustumCulled = false;

        object.traverse(child => {
          child.frustumCulled = false;
        });

        // console.log(object);

        model = object;

        scene.add(object);
      });

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);

      renderer.setAnimationLoop(animate);
    }

    function animate() {
      if (model) {
        const animationTime = 4000;
        const f = ((Date.now() % animationTime) / animationTime) * (Math.PI * 2);
        model.quaternion.setFromUnitVectors(
          new THREE.Vector3(0, 0, 1),
          new THREE.Vector3(Math.cos(f), 0, Math.sin(f)).normalize()
        );
        model.updateMatrixWorld();
      }

      renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
    }

    init();

    (async () => {
      console.log('request device');
      const [display] = await navigator.getVRDisplays();

      if (display) {
        console.log('request present');
        await display.requestPresent([
          {
            source: renderer.domElement,
          }
        ]);
        console.log('entered vr');

        const {renderWidth: width, renderHeight: height} = display.getEyeParameters('left');       
        renderer.setSize(width * 2, height);

        renderer.setAnimationLoop(null);
        renderer.vr.enabled = true;
        renderer.vr.setDevice(display);
        renderer.vr.setAnimationLoop(animate);
      } else {
        console.log('no vr displays');
      }
    })().catch(err => {
      console.warn(err.stack);
    });
  </script>
  </body>
</html>