JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three-orbitcontrols@2.110.3/OrbitControls.min.js"></script>
<div id="render" style="width:300px; height:250px;"></div>

JavaScript

var camera, scene, renderer;

const canvas = document.getElementById('render');



init();
animate();

function init() {

    const width = 20;
    const height = width * (canvas.offsetHeight / canvas.offsetWidth);
    camera = new THREE.PerspectiveCamera( 50, canvas.offsetWidth / canvas.offsetHeight, 0.01, 10 );
    camera.position.z = 5;
    camera.position.y = 2;
    camera.lookAt(0, 0, 0);



    scene = new THREE.Scene();


    var geometry = new THREE.BufferGeometry();

    const y = 0.866025404;
    const y2 = 0.5;
    const h = 1;

    const vertices = new Float32Array( [
        -y2, 0, 0,
        y2, 0, 0,
        0, 0, y,

        -y2, h, 0,
        y2, h, 0,
        0, h, y,
    ]);

    const indices = [
        0, 1, 2, // Top
        5, 4, 3, // Bottom
        3, 1, 0, // Back
        1, 3, 4, // Back
        0, 2, 3, // Left
        5, 3, 2, // Left
        4, 2, 1, // Right
        2, 4, 5, // Right
    ];


    geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    geometry.setIndex( indices);

    geometry.computeVertexNormals();

    geometry.clearGroups();
    geometry.addGroup(0, 3, 0);
    geometry.addGroup(1, 3, 1);
    geometry.addGroup(2, 6, 2);
    geometry.addGroup(4, 6, 3);
    geometry.addGroup(6, 6, 4);

    // var material = [
    //     new THREE.MeshBasicMaterial({
    //         color: 0x00ff00
    //     }),
    //     new THREE.MeshBasicMaterial({
    //         color: 0xff0000
    //     }),
    //     new THREE.MeshBasicMaterial({
    //         color: 0x0000ff,
    //     }),
    //     new THREE.MeshBasicMaterial({
    //         color: 0xffff00
    //     }),
    //     new THREE.MeshBasicMaterial({
    //         color: 0x00ffff
    //     })
    //
    // ];

    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    var mesh = new THREE.Mesh( geometry, material); // , side: THREE.DoubleSide
    scene.add( mesh );


    renderer = new THREE.WebGLRenderer( {...