JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<body>
  <div id="escape">x</div>
</body>
<script src="//dl.dropboxusercontent.com/s/n703uaiuxnl5tf9/three.js"></script>
<script src="//dl.dropboxusercontent.com/s/bzhsyoiel60h4mw/Tween.js"></script>
<script src="//dl.dropboxusercontent.com/s/cvmhgaat4fu83sq/TrackballControls.js"></script>
<script src="//dl.dropboxusercontent.com/s/fcmw2cw6vhfg6bc/VRControls.js"></script>
<script src="//dl.dropboxusercontent.com/s/ieockmelacvhrgt/VREffect.js"></script>
<script src="//dl.dropboxusercontent.com/s/twmtwwciloa3i7q/webvr-polyfill.js"></script>
<script src="//dl.dropboxusercontent.com/s/itcei5r915zp9c6/webvr-manager.js"></script>

CSS

body {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
#escape {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 32px;
  cursor: pointer;
  z-index: 100;
}

JavaScript

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

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

var controls = new THREE.VRControls(camera);

var geometry = new THREE.SphereGeometry(5, 32, 32);

var material = new THREE.MeshLambertMaterial({color:0xffffff, shading: THREE.FlatShading});

var objects = [];
for ( var i = 0; i < 100; i ++ ) {
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = ( Math.random() - 0.5 ) * 1000;
  mesh.position.y = ( Math.random() - 0.5 ) * 1000;
  mesh.position.z = ( Math.random() - 0.5 ) * 1000;
  objects.push(mesh);
  scene.add(mesh);
}

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );
light = new THREE.AmbientLight(0x222222);
scene.add( light );

var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

var manager = new WebVRManager(renderer, effect);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

var focused = false;

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.getElementById('escape').addEventListener('click', unfocus, true);
animate();

function animate(timestamp) {
  TWEEN.update();
  // Controls are null while tweening.
  if (controls) {
    controls.update();
  }
  manager.render(scene, camera, timestamp);
  requestAnimationFrame(animate);
}

function onDocumentMouseDown( event ) {
  event.preventDefault();
  mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(objects, true);
  if (intersects.length > 0 &&...