JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script>
<div id="three"></div>
<div id="buttons">
    <div id="toggle-wireframe" class="button">toggle-wireframe</div>
</div>
<script src="//rawgit.com/mrdoob/three.js/2b6505090d40d000606b29ba126d87397414633e/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    font-family: sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
}
#buttons {
    position: absolute;
    top: 10px;
    left: 10px;
}
.button {
    background: #eee;
    padding: 3px 5px;
    margin: 5px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #aaa;
}
#test {
    position: absolute;
    left: 15px;
    top: 50px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px #444;
    padding: 5px;
}

JavaScript

THREE.BoxGeometry2 = function (width, height, depth, widthSegments, heightSegments, depthSegments) {
    THREE.Geometry.call(this);

    var scope = this;

    this.width = width;
    this.height = height;
    this.depth = depth;

    this.widthSegments = widthSegments || 1;
    this.heightSegments = heightSegments || 1;
    this.depthSegments = depthSegments || 1;

    var width_half = this.width / 2;
    var height_half = this.height / 2;
    var depth_half = this.depth / 2;

    buildPlane('z', 'y', -1, -1, this.depth, this.height, width_half, 0); // px
    buildPlane('z', 'y', 1, -1, this.depth, this.height, -width_half, 1); // nx
    buildPlane('x', 'z', 1, 1, this.width, this.depth, height_half, 2); // py
    buildPlane('x', 'z', 1, -1, this.width, this.depth, -height_half, 3); // ny
    buildPlane('x', 'y', 1, -1, this.width, this.height, depth_half, 4); // pz
    buildPlane('x', 'y', -1, -1, this.width, this.height, -depth_half, 5); // nz

    function buildPlane(u, v, udir, vdir, width, height, depth, materialIndex) {

        var w, ix, iy,
        gridX = scope.widthSegments,
            gridY = scope.heightSegments,
            width_half = width / 2,
            height_half = height / 2,
            offset = scope.vertices.length;

        if ((u === 'x' && v === 'y') || (u === 'y' && v === 'x')) {

            w = 'z';

        } else if ((u === 'x' && v === 'z') || (u === 'z' && v === 'x')) {

            w = 'y';
            gridY = scope.depthSegments;

        } else if ((u === 'z' && v === 'y') || (u === 'y' && v === 'z')) {

            w = 'x';
            gridX = scope.depthSegments;

        }

        var gridX1 = gridX + 1,
            gridY1 = gridY + 1,
            segment_width = width / gridX,
            segment_height = height / gridY,
            normal = new THREE.Vector3();

        normal[w] = depth > 0 ? 1 : -1;

        for (iy = 0; iy < gridY1; iy++) {

            for (ix = 0; ix < gridX1; ix++) {

                var vector...