JSFiddle - React, Tailwind, and code Playground

by Shakena

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

CSS

body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

JavaScript

// Adding some Extra Shapes
    
    
function CubOctahedronBufferGeometry( radius, detail ) {

    var vertices = [

        0, 1, - 1,  - 1, 1, 0,
        0, 1, 1,  1, 1, 0,
        1, 0, - 1,  - 1, 0, - 1,
        - 1, 0, 1,  1, 0, 1,
        1, - 1, 0,  0, - 1, - 1,
        - 1, - 1, 0,  0, - 1, 1

    ];

    var indices = [

        2, 3, 0,   1, 2, 0,
        7, 8, 3,  8, 4, 3,
        0, 4, 9,  0, 9, 5,
        1, 5, 10,  1, 10, 6,
        2, 6, 11,  2, 11, 7,
        10, 8, 11,  9, 8, 10,

        2, 1, 6,  3, 2, 7,
        0, 3, 4,  1, 0, 5,
        11, 6, 10,  8, 7, 11,
        9, 4, 8,  10, 5, 9

    ];

    THREE.PolyhedronBufferGeometry.call( this, vertices, indices, radius, detail );

    this.type = 'CubOctahedronBufferGeometry';

    this.parameters = {
        radius: radius,
        detail: detail
    };

}

CubOctahedronBufferGeometry.prototype = Object.create( THREE.PolyhedronBufferGeometry.prototype );
CubOctahedronBufferGeometry.prototype.constructor = CubOctahedronBufferGeometry;


function RhombicDodecahedronBufferGeometry( radius, detail ) {

    var s = radius * 0.5;
    var b = s * 2.0;

    var vertices = [

        // (±1, ±1, ±1)
        - s, - s, - s,  s, - s, - s,
        s, - s, s,  - s, - s, s,
        - s, s, -s,  - s, s, s,
        s, s, s,  s, s, - s,

        0, b, 0,  0, - b, 0,
        0, 0, - b,  0, 0, b,
        b, 0, 0,  - b, 0, 0

    ];

    var indices = [

        0, 3, 13,   9, 3, 0,
        0, 13, 4,  10, 0, 4,
        9, 0, 1,  1, 0, 10,
        7, 10, 4,  4, 8, 7,
        4, 13, 5,  8, 4, 5,
        5, 13, 3,  5, 3, 11,
        3, 2, 11,  3, 9, 2,
        5, 11, 6,  8, 5, 6,
        6, 11, 2,  6, 2, 12,
        12, 7, 6,  7, 8, 6,
        12, 1, 7,  7, 1, 10,
        1, 12, 2,  2, 9, 1

    ];

    //THREE.PolyhedronBufferGeometry.call( this, vertices, indices, radius, detail );

    THREE.BufferGeometry.call(this);
    this.addAttribute("position", new THREE.BufferAttribute(new Float32Array(vertices), 3));
   ...