japboy · December 10, 2017 11:43 · japboy · Dec 10, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Testing WebVR</title>
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <link rel="stylesheet" href="https://unpkg.com/normalize.css@7.0.0/normalize.css">
    <script defer src="https://unpkg.com/three@0.88.0/build/three.min.js"></script>
    <script>
      class WebVR {
        constructor(renderer) {
          this.renderer = renderer;
          if ('getVRDisplays' in navigator) {
            window.addEventListener('vrdisplayconnect', this.onConnect, false);
            window.addEventListener('vrdisplaydisconnect', this.onDisconnect, false);
            window.addEventListener('vrdisplaypresentchange', this.onChange, false);
            this.getVRDisplays();
          }
        }

        async getVRDisplays() {
          let displays = await navigator.getVRDisplays();
          displays = displays.filter(display => display.capabilities.canPresent);
          if (displays.length > 0) {
            this.enter(displays[0]);
          } else {
            this.leave();
          }
        }

        onConnect(event) {
          this.enter(event.display);
        }

        onDisconnect(event) {
          this.leave();
        }

        onChange(event) {
          console.log(event.display.isPresenting);
        }

        enter(display) {
          this.renderer.vr.setDevice(display);
        }

        leave() {
          this.renderer.vr.setDevice(null);
        }
      }
    </script>
    <script>
      class Cube {
        constructor() {
          this.geometry = new THREE.CubeGeometry(500, 500, 500, 10, 10, 10);
          this.material = new THREE.MeshBasicMaterial({
            color: 0x00dd00, wireframe: true, transparent: true
          });
          this.mesh = new THREE.Mesh(this.geometry, this.material);
        }

        get position() {
          return this.mesh.position;
        }
      }

      class Stage {
        constructor() {
          this.renderer = new THREE.WebGLRenderer({
            antialias: true,
          });
          this.renderer.vr.enabled = true;
          this.renderer.setPixelRatio(window.devicePixelRatio);
          this.renderer.setClearColor(0xffffff);

          this.camera = new THREE.PerspectiveCamera(90, 1, 0.1, 1000);
          this.camera.position.set(0, 200, 900);

          this.scene = new THREE.Scene();

          this.vr = new WebVR(this.renderer);
        }

        get element() {
          return this.renderer.domElement;
        }

        resize() {
          const width = window.innerWidth;
          const height = window.innerHeight;
          const aspect = width / height;
          this.camera.aspect = aspect;
          this.camera.updateProjectionMatrix();
          this.renderer.setSize(width, height);
        }

        add(mesh) {
          this.scene.add(mesh);
        }

        lookAt(position) {
          this.camera.lookAt(position);
        }

        render() {
          this.renderer.render(this.scene, this.camera);
        }

        animate() {
          window.requestAnimationFrame(() => { this.animate(); });
          this.render();
        }
      }

      function init() {
        document.removeEventListener('DOMContentLoaded', init);

        const stage = new Stage();
        const cube = new Cube();

        stage.add(cube.mesh)
        stage.lookAt(cube.position);

        window.addEventListener('resize', stage.resize.bind(stage), false);
        stage.resize();

        stage.animate();
        document.body.appendChild(stage.element);
      }

      document.addEventListener('DOMContentLoaded', init, false);
    </script>
  </head>
  <body></body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Testing WebVR</title>
	<meta name="viewport" content="width=device-width, user-scalable=yes">
	<link rel="stylesheet" href="https://unpkg.com/normalize.css@7.0.0/normalize.css">
	<script defer src="https://unpkg.com/three@0.88.0/build/three.min.js"></script>
	<script>
	class WebVR {
	constructor(renderer) {
	this.renderer = renderer;
	if ('getVRDisplays' in navigator) {
	window.addEventListener('vrdisplayconnect', this.onConnect, false);
	window.addEventListener('vrdisplaydisconnect', this.onDisconnect, false);
	window.addEventListener('vrdisplaypresentchange', this.onChange, false);
	this.getVRDisplays();
	}
	}

	async getVRDisplays() {
	let displays = await navigator.getVRDisplays();
	displays = displays.filter(display => display.capabilities.canPresent);
	if (displays.length > 0) {
	this.enter(displays[0]);
	} else {
	this.leave();
	}
	}

	onConnect(event) {
	this.enter(event.display);
	}

	onDisconnect(event) {
	this.leave();
	}

	onChange(event) {
	console.log(event.display.isPresenting);
	}

	enter(display) {
	this.renderer.vr.setDevice(display);
	}

	leave() {
	this.renderer.vr.setDevice(null);
	}
	}
	</script>
	<script>
	class Cube {
	constructor() {
	this.geometry = new THREE.CubeGeometry(500, 500, 500, 10, 10, 10);
	this.material = new THREE.MeshBasicMaterial({
	color: 0x00dd00, wireframe: true, transparent: true
	});
	this.mesh = new THREE.Mesh(this.geometry, this.material);
	}

	get position() {
	return this.mesh.position;
	}
	}

	class Stage {
	constructor() {
	this.renderer = new THREE.WebGLRenderer({
	antialias: true,
	});
	this.renderer.vr.enabled = true;
	this.renderer.setPixelRatio(window.devicePixelRatio);
	this.renderer.setClearColor(0xffffff);

	this.camera = new THREE.PerspectiveCamera(90, 1, 0.1, 1000);
	this.camera.position.set(0, 200, 900);

	this.scene = new THREE.Scene();

	this.vr = new WebVR(this.renderer);
	}

	get element() {
	return this.renderer.domElement;
	}

	resize() {
	const width = window.innerWidth;
	const height = window.innerHeight;
	const aspect = width / height;
	this.camera.aspect = aspect;
	this.camera.updateProjectionMatrix();
	this.renderer.setSize(width, height);
	}

	add(mesh) {
	this.scene.add(mesh);
	}

	lookAt(position) {
	this.camera.lookAt(position);
	}

	render() {
	this.renderer.render(this.scene, this.camera);
	}

	animate() {
	window.requestAnimationFrame(() => { this.animate(); });
	this.render();
	}
	}

	function init() {
	document.removeEventListener('DOMContentLoaded', init);

	const stage = new Stage();
	const cube = new Cube();

	stage.add(cube.mesh)
	stage.lookAt(cube.position);

	window.addEventListener('resize', stage.resize.bind(stage), false);
	stage.resize();

	stage.animate();
	document.body.appendChild(stage.element);
	}

	document.addEventListener('DOMContentLoaded', init, false);
	</script>
	</head>
	<body></body>
	</html>