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>
<link rel="stylesheet" href="https://yomotsu.github.io/virtualInput/virtualInput.css">

</head>
<body>
<div class="info">
  WASD to move, Space to jump. Plus, mousedrag to rotate, scroll to zoom
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>
</body>
</html>

CSS

body {
	color: "black";
}
#joystick1,
#joystick2{
  bottom: 30px;
}
#button2{
  bottom: 240px;
  right: 80px;
}
#joystick1{left: 50px;}
#joystick2{right: 50px;}
@media ( max-width: 768px ) {
  #joystick1,
  #joystick2{
    bottom:0px;
  }
  #joystick1{left: 0px;}
  #joystick2{right: 0px;}
}

JavaScript

// 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 rocks = [];
var keyInputControl;
var tpsCameraControl;

MW.install( THREE );

world = new MW.World();
min = new THREE.Vector3( -10000000000, -1500, -10000000000 );
max = new THREE.Vector3(  10000000000,  1500,  10000000000 );
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();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
 // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);
renderer = new THREE.WebGLRenderer();
//renderer.setClearColor("orange");
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );

	// STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	document.body.appendChild( stats.domElement );
  
wall = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshNormalMaterial( { wireframe: true } )
);
wall.position.set( 0, -100, -450 );
// wall.rotation.set( 0, 0, THREE.Math.degToRad( 20 ) );
scene.add( wall );
octree.importThreeMesh( wall );
//tpsCameraControl.rigidObjects.push(wall)


playerObjectHolder = new THREE.Object3D();
playerObjectHolder.position.set( 0, 4, 0 );
scene.add( playerObjectHolder );

sphere = new THREE.Mesh(
  new THREE.BoxGeometry( 14, 14, 14 ),
  new THREE.MeshBasicMaterial( { color: 0xff0000,  wireframe: true} )
);
playerObjectHolder.add( sphere );
playerObjectHolder.position.y = -100
playerObjectHolder.position.z = 3400
playerController = new MW.CharacterController(...