JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<div class="info">	<a href="http://threejs.org" target="_blank">three.js</a> webgl - gpu picking (modified)</div>
<div id="container"></div>

CSS

body {
    font-family: Monospace;
    background-color: #000000;
    margin: 0px;
    overflow: hidden;
}
.info {
    position: absolute;
    background-color: black;
    opacity: 0.8;
    color: white;
    text-align: center;
    top: 0px;
    width: 100%;
}
.info a {
    color: #00ffff;
}

JavaScript

// modified version of http://threejs.org/examples/webgl_interactive_cubes_gpu.html

var container, stats;
var camera, controls, scene, renderer;
var pickingData = [],
    pickingTexture, pickingScene;
var objects = [];
var highlightShape;
var pixelBuffer = new Uint8Array(4);
var highlightShape2, scene2, scene3;

var mouse = new THREE.Vector2();
var offset = new THREE.Vector3(10, 10, 10);

init();
animate();

function init() {

    container = document.getElementById("container");

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

    controls = new THREE.TrackballControls(camera);
    //controls.rotateSpeed = 1.0;
    //controls.zoomSpeed = 1.2;
    //controls.panSpeed = 0.8;
    //controls.noZoom = false;
    //controls.noPan = false;
    //controls.staticMoving = true;
    //controls.dynamicDampingFactor = 0.3;

    scene = new THREE.Scene();
    scene2 = new THREE.Scene();
    scene3 = new THREE.Scene();

    pickingScene = new THREE.Scene();
    pickingTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
    pickingTexture.generateMipmaps = false;

    scene.add(new THREE.AmbientLight(0x555555));
    scene3.add(new THREE.AmbientLight(0x555555));

    var light = new THREE.SpotLight(0xffffff, 1.5);
    light.position.set(0, 500, 2000);
    scene.add(light);
    var light2 = light.clone();
    light2.position = light.position;
    scene3.add(light2);

    var geometry = new THREE.Geometry(),
        pickingGeometry = new THREE.Geometry(),
        pickingMaterial = new THREE.MeshBasicMaterial({
            vertexColors: THREE.VertexColors
        }),
        defaultMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff,
            shading: THREE.FlatShading,
            vertexColors: THREE.VertexColors
        });

    function applyVertexColors(g, c) {

        g.faces.forEach(function (f) {

            for (var j = 0; j < 3; j++) {

        ...