JSFiddle - React, Tailwind, and code Playground

by zzzrefiddle

HTML

<canvas id="cnv" width="800" height="600"></canvas>

<p>Created by Jérémy Heleine for
    <a href="http://www.sitepoint.com/">SitePoint</a>
</p>

CSS

html,
    body,
    canvas {
        margin: 0;
        width: 100%;
        height: 100%;
    }

    p {
        text-align: center;
    }

JavaScript

var Vertex = function (x, y, z) {
        this.x = parseFloat(x);
        this.y = parseFloat(y);
        this.z = parseFloat(z);
    };

    var Vertex2D = function (x, y) {
        this.x = parseFloat(x);
        this.y = parseFloat(y);
    };

    var Cube = function (center, side) {
        // Generate the vertices
        var d = side / 2;
        console.log(d);
        console.log(center.x);
        console.log(center.y);
        console.log(center.z);

        this.vertices = [
            new Vertex(center.x - d/1.5, center.y - d, center.z + d),
            new Vertex(center.x - d/1.5, center.y - d, center.z - d),
            new Vertex(center.x + d/1.5, center.y - d, center.z - d),
            new Vertex(center.x + d/1.5, center.y - d, center.z + d),
            new Vertex(center.x + d, center.y + d, center.z + 2.2*d),
            new Vertex(center.x + d, center.y + d, center.z - 2.2*d),
            new Vertex(center.x - d, center.y + d, center.z - 2.2*d),
            new Vertex(center.x - d, center.y + d, center.z + 2.2*d),
            new Vertex(center.x + d, center.y + d, center.z + 1.1*d),
            new Vertex(center.x + d, center.y + d, center.z - 1.1*d),
            new Vertex(center.x - d, center.y + d, center.z - 1.1*d),
            new Vertex(center.x - d, center.y + d, center.z + 1.1*d),
            new Vertex(center.x + d/1.5, center.y - d, center.z + d/3),
            new Vertex(center.x + d/1.5, center.y - d, center.z - d/2),
            new Vertex(center.x - d/1.5, center.y - d, center.z - d/2),
            new Vertex(center.x - d/1.5, center.y - d, center.z + d/3),
            new Vertex(center.x - d/1.5, center.y - d, center.z-d/8),
            new Vertex(center.x + d/1.5, center.y - d, center.z-d/8),
            new Vertex(center.x + d/1.5, center.y + d, center.z),
            new Vertex(center.x - d/1.5, center.y + d, center.z)
        ];

        // Generate the faces
        this.faces = [
            [this.vertices[0],...