JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script src="http://codepen.io/xgundam05/pen/vdoIx.js"></script>

CSS

body{
  background-color: #2e2e2e;
}
input[type=button]{
  position: absolute;
  width: 100px;
  height: 20px;
  top: calc(50% - 10px);
  left: calc(50% - 50px);
}

JavaScript

// Gyroscope (gyro.js):
// @author Tom Gallacher
//         http://tomg.co/gyrojs
//
// Oculus Effect:
// @author troffmo5
//         http://github.com/troffmo5
//
// Oculus Effect modification:
// @author XGundam05

var degToRad = 1 / 180;
var radToDeg = 1 / Math.PI;

AddHMDFunctionality(THREE);

function Player(){
  this.avatar = new THREE.Object3D();
  this.gimbal = new THREE.Object3D();
  this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  // Initialize the camera to look downwards
  this.camera.lookAt(new THREE.Vector3(0, 0, 0));
  this.camera.rotation.x = Math.PI / 2;
  this.camera.rotation.y = 0;
  this.camera.rotation.z = 0;
  
  // The avatar is the 3D object represenation of the player
  // - This lets us de-couple the HMD orientation from the
  //   player orientation if we choose (for vehicles and the like)
  this.avatar.add(this.gimbal);
  
  // The Gimbal corresponds 1:1 with the device orientation
  // - This makes it easier to align the camera
  this.gimbal.add(this.camera);
  
  this.acc = undefined;
}

Player.prototype = {
  update: function(t){
    this.acc = gyro.getOrientation();
    
    // Adjust camera/avatar orientation
    
    // -- I think this is the correct mapping --
    // Rotate the camera Gimbal to match the device
    // - We can orient the player afterwords if needed
    this.gimbal.rotation.y = Math.PI * this.acc.alpha * degToRad;
    this.gimbal.rotation.x = Math.PI * this.acc.beta * degToRad;
    this.gimbal.rotation.z = Math.PI * this.acc.gamma * degToRad;
  }
};

var scene, renderer, lights, player, bsp, effect;

function Init(){
  scene = new THREE.Scene();
  
  lights = [];
  
  lights[0] = new THREE.AmbientLight(0x403440);
  lights[1] = new THREE.DirectionalLight(0xffffff, 0.75);
  lights[2] = new THREE.DirectionalLight(0xffffff, 0.25);
  
  lights[1].position.set( 10,  5,  5);
  lights[2].position.set(-10, -5, -5);
  
  renderer = new THREE.WebGLRenderer();
 ...