JSFiddle - React, Tailwind, and code Playground

by henros

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="main">
    
</div>

CSS

body {
    font-family: Monospace;
    background-color: #f0f0f0;
    margin: 0px;
    overflow: hidden;
}
#oldie {
    background-color: #ddd !important
}

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

    var container, stats;
    var camera, scene, renderer;
    var projector, plane, cube;
    var mouse2D, mouse3D, raycaster,
    rollOveredFace, isShiftDown = false,
        theta = 45 * 0.5,
        isCtrlDown = false;

    var rollOverMesh, rollOverMaterial;
    var voxelPosition = new THREE.Vector3(),
        tmpVec = new THREE.Vector3(),
        normalMatrix = new THREE.Matrix3();
    var cubeGeo, cubeMaterial;
    var i, intersector;

    var objects = [];

    init();
    animate();

    function init() {
        //region scene
        container = document.getElementById('main');
        var canvas = {
            width: 800,
            height: 600
        };
        canvas.halfx = canvas.width / 2;
        canvas.halfy = canvas.height / 2;

        //Camera
        camera = new THREE.PerspectiveCamera(60, canvas.width / canvas.height, 1, 10000);
        camera.position.y = 800;
        //scene
        scene = new THREE.Scene();
        //add fog to scene
        scene.fog = new THREE.Fog(0xffffff, 0.015, 100);
        //endregion

        //region lights
        // LIGHTS
        scene.add(new THREE.AmbientLight(0x333333));

        var light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5,3,5);
        scene.add(light);
        //endregion

        //region highlight
        // roll-over helpers
        var rollOverGeo = new THREE.BoxGeometry(50, 50, 50);
        rollOverMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            opacity: 0.5,
            transparent: true
        });
        rollOverMesh = new THREE.Mesh(rollOverGeo, rollOverMaterial);
        scene.add(rollOverMesh);
        projector = new THREE.Projector();
        //endregion

        //region Grid and Plane
        // grid
        var size = 800,
            step = 50;

        var geometry = new THREE.Geometry();

        for (var i = -size; i <= size; i += step) {

           ...