JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

test...<script src="https://stemkoski.github.io/Three.js/js/Three.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Detector.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/OrbitControls.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/THREEx.KeyboardState.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/THREEx.WindowResize.js"></script>

<!-- Simplfied gamepad interaction (Chrome 22 patched) -->
<script src="https://stemkoski.github.io/Three.js/js/gamepad.js"></script>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

JavaScript

// MAIN

// standard global variables
var container, scene, camera, renderer, controls;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();

var android;

var animOffset       = 0,
	walking         = false,
	duration        = 1000,
	keyframes       = 20,
	interpolation   = duration / keyframes,
	lastKeyframe    = 0,
	currentKeyframe = 0;
	
init();
animate();

// FUNCTIONS 		
function init(){

	// SCENE
	scene = new THREE.Scene();
    
	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position.set(0,150,400);
	camera.lookAt(scene.position);	
    
	// RENDERER
	if(Detector.webgl){
		renderer = new THREE.WebGLRenderer( {antialias:true} );
	}else{
		renderer = new THREE.CanvasRenderer();
    }
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	container = document.getElementById('ThreeJS');
	container.appendChild( renderer.domElement );
    
	// EVENTS
	THREEx.WindowResize(renderer, camera);
    
	// CONTROLS
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	
	// LIGHT
	var light = new THREE.PointLight(0xffffff);
	light.position.set(-100,200,100);
	scene.add(light);
    
    THREE.ImageUtils.crossOrigin = '';
	var floorTexture = new THREE.ImageUtils.loadTexture( 'https://stemkoski.github.io/Three.js/images/checkerboard.jpg' );
	floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
	floorTexture.repeat.set( 10, 10 );
	var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
	var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
	var floor = new THREE.Mesh(floorGeometry, floorMaterial);
	floor.position.y = -0.5;
	floor.rotation.x = Math.PI / 2;
	scene.add(floor);
    
	// SKYBOX/FOG
	var skyBoxGeometry = new THREE.CubeGeometry(10000, 10000, 10000 );
	var...