JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://chir.ag/projects/wh/Three.js"></script>
<script src="http://chir.ag/projects/wh/RequestAnimationFrame.js"></script>
<script src="http://chir.ag/projects/wh/DAT.GUI.min.js"></script>
<div...

CSS

body {
    color: #404040;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
    background-color: #ffffff;
    margin: 0px;
    overflow: hidden;
    cursor:pointer;
}
#data {
    display:none;
}
}

JavaScript

var camera, scene, renderer, projector;
var cube, cylinder;
var objects, dest;

function canDoWebGL() {
    var contextNames = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"];
    var canvas = document.createElement('canvas');
    for (var i = 0; i < contextNames.length; i++) {
        try {
            gl = canvas.getContext(contextNames[i]);
            if (gl) return true;
        } catch (e) {
            return false;
        }
        if (typeof (gl) == 'undefined') return false;
    }
}

function objectUnderCursor(event) {
    event.preventDefault();
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);
    var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
    var intersects = ray.intersectObjects(objects);
    return (intersects.length > 0 ? intersects[0] : false);
}

function hookEvents() {

    $(document).mousedown(function (e) {
        var s = objectUnderCursor(e);
        if (!s) return;
        var m = s.object.material;
        if (typeof (m.oldcolor) != 'undefined') {
            m.color.setHex(m.oldcolor);
            delete(m.oldcolor);
        } else {
            m.oldcolor = m.color.getHex();
            m.color.setHex(0xff);
        }
    });

    $(document).mousemove(function (e) {
        var s = objectUnderCursor(e);
        if (!s) return;

        console.log(s.object.data.id);
        return;
        var m = s.object.material;
        if (typeof (m.realcolor) == 'undefined') m.realcolor = m.color.getHex();
        (function (cur) {
            setTimeout(function () {
                m.color.setHex(cur);
            }, 1000);
        })(m.realcolor);
        m.color.setHex(0xffff00);
    });
}

function drawBoxes(boxes) {

    var wf = new THREE.MeshBasicMaterial({
        color: 0x44044,
        wireframe: true,
        wireframeLinewidth: 1
    });

    var pg =...