JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>=^.^=</title>
<style>
body{margin: 0;padding: 0; background: #000;}
canvas{display: block;}
.info{
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
</head>
<body>
<div class="info">
  WASD to move, Space to jump. Plus, mousedrag to rotate, scroll to zoom
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="https://yomotsu.github.io/meshwalk.js/dist/meshwalk.js"></script>
<script src="https://cdn.rawgit.com/waverider404/xmas2014/gh-pages/lib/virtualInput.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://yomotsu.github.io/virtualInput/virtualInput.css">
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/loaders/BabylonLoader.js"></script>
<script src="https://threejs.org/examples/js/modifiers/SimplifyModifier.js"></script>
</body>
</html>

CSS

#joystick1,
#joystick2{
  bottom: 30px;
}
#joystick1{left: 50px;}
#joystick2{right: 50px;}
@media ( max-width: 768px ) {
  #joystick1,
  #joystick2{
    bottom:0px;
  }
  #joystick1{left: 0px;}
  #joystick2{right: 0px;}
}

JavaScript

var isMobile = ( function () {

  var ua = navigator.userAgent,
      apple_phone      = /iPhone/i,
      apple_ipod       = /iPod/i,
      apple_tablet     = /iPad/i,
      android_phone    = /(?=.*\bAndroid\b)(?=.*\bMobile\b)/i, // Match 'Android' AND 'Mobile'
      android_tablet   = /Android/i,
      windows_phone    = /IEMobile/i,
      windows_tablet   = /(?=.*\bWindows\b)(?=.*\bARM\b)/i, // Match 'Windows' AND 'ARM'
      other_blackberry = /BlackBerry/i,
      other_opera      = /Opera Mini/i,
      other_firefox    = /(?=.*\bFirefox\b)(?=.*\bMobile\b)/i; // Match 'Firefox' AND 'Mobile'

  if (
    apple_phone.test( ua )      ||
    apple_phone.test( ua )      ||
    apple_ipod.test( ua )       ||
    apple_tablet.test( ua )     ||
    android_phone.test( ua )    ||
    android_tablet.test( ua )   ||
    windows_phone.test( ua )    ||
    windows_tablet.test( ua )   ||
    other_blackberry.test( ua ) ||
    other_opera.test( ua )      ||
    other_firefox.test( ua )
  ) {

    return true;

  } else {

    return false;

  }

} )();
// See demo/2_keyboardInput.html first

var width, height, clock, scene, camera, renderer;
var stats;
var ground, wall, sphere;
var world, min, max, partition, octree,
    playerRadius = 1, playerObjectHolder, playerController;
var keyInputControl;
var tpsCameraControl;
var vent = new THREE.EventDispatcher();
//JOYSTIC
var joystick1 = new virtualInput.Joystick( $( document.body ), 120, { id: 'joystick1' } );
var joystick2 = new virtualInput.Joystick( $( document.body ), 120, { id: 'joystick2' } );

MW.install( THREE );

world = new MW.World();
min = new THREE.Vector3( -1500, -150, -1500 );
max = new THREE.Vector3(  1500,  150,  1500 );
partition = 5;
octree = new MW.Octree( min, max, partition );
world.add( octree );


width = window.innerWidth;
height = window.innerHeight;
clock = new THREE.Clock();
scene = new THREE.Scene();
scene.background = new THREE.Color( "gray" );
scene.fog = new THREE.FogExp2( "gray", 0.008 );
camera...