JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<link rel="stylesheet" href="https://yomotsu.github.io/virtualInput/virtualInput.css">
<script src="https://threejs.org/build/three.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.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>

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

// a basic three.js scene

var container, renderer, scene, camera, controls;
var world, min, max, partition, octree, playerRadius = 1, playerObjectHolder, playerController;
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 );

 var vent = new THREE.EventDispatcher();
    
 var joystick1 = new virtualInput.Joystick( $( document.body ), 120, { id: 'joystick1' } );
    var joystick2 = new virtualInput.Joystick( $( document.body ), 120, { id: 'joystick2' } );
var clock = new THREE.Clock();
init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.gammaFactor = 2.2;
		renderer.gammaOutput = true;
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    //controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

    // mesh
 var loader = new THREE.GLTFLoader();
    loader.setCrossOrigin( 'anonymous' );

    var scale = 50;
    //var url = "https://raw.githubusercontent.com/lasalvavida/glTF-Sample-Models/2.0/2.0/Avocado/glTF/Avocado.gltf";
    var url =...