JSFiddle - React, Tailwind, and code Playground

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>

<p>please use orbit control to see the top plane properly </p>
<p>The Top plane and other planes should be straight planes, not a broken planes... </p>
<p>The Top Plane is Plane A, as you can see in the code, they all have the same value in Y</p>
<p>So why does Three.js show the tips in a lesser height ???</p>

CSS

body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
        p{
            font-size: 16px;
        }

JavaScript

function RhombicTriaContahedronBufferGeometry( radius, detail ) {

    var l = 1;
    var s = 1;
		
		console.log( s, l );

    var vertices = [

        // cube vtx
        - 1, - 1, - 1, // 0
        1, - 1, - 1, // 1
        1, - 1, 1, // 2
        - 1, - 1, 1, // 3
        - 1, 1, - 1, // 4
        - 1, 1, 1, // 5
        1, 1, 1, // 6
        1, 1, - 1, // 7

        // dodeca vtx
        0, l, s, // 8 plane A
        0, l, - s, // 9 plane A
        0, - l, s, // 10
        0, - l, - s, // 11
        s, 0, l, // 12
        - s, 0, l, // 13
        s, 0, - l, // 14
        - s, 0, - l, // 15
        l, s, 0, // 16
        l, - s, 0, // 17
        - l, s, 0, // 18
        - l, - s, 0, // 19

        // icosa vtx
        1, l, 0, // 20 plane A
        - 1, l, 0, // 21 plane A
        1, - l, 0, // 22
        - 1, - l, 0, // 23
        0, 1, l, // 24
        0, - 1, l, // 25
        0, 1, - l, // 26
        0, - 1, - l, // 27
        l, 0, 1, // 28
        l, 0, - 1, // 29
        - l, 0, 1, // 30
        - l, 0, - 1 // 31

    ];

    var indices = [

        8, 20, 9,  8, 9, 21,
        17, 29, 16,  17, 16, 28,
        14, 15, 26,  14, 27, 15,
        18, 19, 30,  19, 18, 31,
        13, 12, 24,  12, 13, 25,
        11, 10, 23,  11, 22, 10

    ];

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

    this.type = 'RhombicTriaContahedronBufferGeometry';

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

}

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

var camera, scene, renderer;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 5;

        scene = new THREE.Scene();

//        geometry = new...