JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
    attribute vec3 center;
    varying vec3 vCenter;
    
    void main() {

        vCenter = center;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    }
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
    #extension GL_OES_standard_derivatives: enable

    varying vec3 vCenter;

    float edgeFactorTri() {

        vec3 d = fwidth(vCenter.xyz);
        vec3 a3 = smoothstep(vec3(0.0), d * 1.5, vCenter.xyz);
        return min(min(a3.x, a3.y), a3.z);

    }

    void main() {
        gl_FragColor.rgb = mix(vec3(1.0), vec3(0.2), edgeFactorTri());
        gl_FragColor.a = 1.0;
    }
</script>

JavaScript

function BufferEdgesHelper(geometry) {
        
        var positions = geometry.attributes.position.array;
        var normals = geometry.attributes.normal.array;
        
        // Build new attribute storing barycentric coordinates
        // for each vertex
        var centers = new THREE.BufferAttribute(new Float32Array( 3 * positions.length ), 3);
        for( var f = 0; f < positions.length; f += 9 ) {
            centers.array[ f + 0 ] = 1;
            centers.array[ f + 1 ] = 0;
            centers.array[ f + 2 ] = 0;

            centers.array[ f + 3 ] = 0;
            centers.array[ f + 4 ] = 1;
            centers.array[ f + 5 ] = 0;

            centers.array[ f + 6 ] = 0;
            centers.array[ f + 7 ] = 0;
            centers.array[ f + 8 ] = 1;
        }
        geometry.addAttribute( 'center', centers );

    }

    // Build geometry 
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    geometry.computeFaceNormals();
    geometry.computeTangents();
    geometry = new THREE.BufferGeometry().fromGeometry(geometry);
    BufferEdgesHelper(geometry);

    // Build shader
    var vertexShader = document.getElementById( 'vertexShader' ).textContent;
    var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;

    var material = new THREE.ShaderMaterial( { 
        uniforms: {}, 
        attributes: {
            'center': { type: 'v3', value: null,  boundTo: 'faceVertices' }
        }, 
        vertexShader: vertexShader, 
        fragmentShader: fragmentShader 
    } );

    var cube = new THREE.Mesh(geometry, material);

    // ------------------------------------------------------------------------
    // (Boilerplate)

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, 
                                             window.innerWidth / 
                                             window.innerHeight, 
                                             0.1, 1000);

    var renderer = new...