JSFiddle - React, Tailwind, and code Playground

by mikel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/src/core/Projector.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<div id="up" style="position:absolute;z-index:500000;left:100px;top:20px;font-weight:bold;"
class="nav">move up</div>
<div id="down" style="position:absolute;z-index:500000;left:100px;top:450px;font-weight:bold;"
class="nav">move down</div>
<div id="left" style="position:absolute;z-index:500000;left:500px;top:20px;font-weight:bold;"
class="nav">move left</div>
<div id="right" style="position:absolute;z-index:500000;left:500px;top:450px;font-weight:bold;"
class="nav">move right</div>
<div id="test" style="position:absolute;z-index:500000;left:100px;top:140px;color:#ffff00;"></div>

CSS

body {
    font-family: Monospace;
    background-color: #000;
    color: #fff;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var r = 505;
	var phi = 0;
	theta = Math.PI / 4;
	var objects = [];

	var cubeGeo;
	var materials = [];
	var container, stats;
	var camera, scene, scene2, renderer;
	var cube, plane;
	var obj_;

	var targetRotation = 0;
	var targetRotationOnMouseDown = 0;

	var mouseX = 0;
	var mouseXOnMouseDown = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;
	var ray;

	init();
	animate();

	function init() {
	    container = document.createElement('div');
	    document.body.appendChild(container);

	    var info = document.createElement('div');
	    info.style.position = 'absolute';
	    info.style.top = '10px';
	    info.style.width = '100%';
	    info.style.textAlign = 'center';
	    info.innerHTML = '';
	    container.appendChild(info);

	    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
	    camera.position.y = 150;
	    camera.position.z = 500;

	    scene = new THREE.Scene();

	    // add subtle ambient lighting
	    var ambientLight = new THREE.AmbientLight(0x555555);
	    scene.add(ambientLight);

	    // add directional light source
	    var directionalLight = new THREE.DirectionalLight(0xEEEEEE);
	    directionalLight.position.set(1, 1, 1).normalize();
	    scene.add(directionalLight);

	    cubeGeo = new THREE.CubeGeometry(200, 200, 200, 1, 1, 1);
	    cubeGeo.uvsNeedUpdate = true;
	    cubeGeo.dynamic = true;
	    cubeGeo.computeFaceNormals();
	    cubeGeo.computeCentroids();
	    cubeGeo.normalsNeedUpdate = true;

	    for (var i = 0; i < cubeGeo.faces.length; i++) {
	        cubeGeo.faces[i].color.setHex(Math.random() * 0xffffff);
	    }
	    var material = new THREE.MeshBasicMaterial({
	        vertexColors: THREE.FaceColors
	    });
	    cube = new THREE.Mesh(cubeGeo, material);
	    cube.position.y = 150;
	    scene.add(cube);

	    //var projector = new THREE.Projector();
	    var vector = cube.position.clone(); // new THREE.Vector3(100, 100, 0.5); // CHANGED
	   ...