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;
    
    attribute float isEdge;
    varying float vIsEdge;

    void main() {

        vCenter = center;
        vIsEdge = isEdge;
        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;
    varying float vIsEdge;

    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() {
        if (vIsEdge > 0.5) {
            gl_FragColor.rgb = mix(vec3(1.0), vec3(0.2), edgeFactorTri());
        } else {
            gl_FragColor.rgb = vec3(0.2);
        }
        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 );


        // Hash all the edges and remember which face they're associated with
        // (Adapted from THREE.EdgesHelper)
        function sortFunction ( a, b ) { 
            if (a[0] - b[0] != 0) {
                return (a[0] - b[0]);
            } else if (a[1] - b[1] != 0) { 
                return (a[1] - b[1]);
            } else { 
                return (a[2] - b[2]);
            }
        }
        var edge = [ 0, 0 ];
        var hash = {};
        var face;
        var numEdges = 0;

        for (var i = 0; i < positions.length/9; i++) {
            var a = i * 9 
            face = [ [ positions[a+0], positions[a+1], positions[a+2] ] ,
                     [ positions[a+3], positions[a+4], positions[a+5] ] ,
                     [ positions[a+6], positions[a+7], positions[a+8] ] ];
            for (var j = 0; j < 3; j++) {
                var k = (j + 1) % 3;
                var b = j * 3
                var c = k * 3
                edge[ 0 ] = face[ j ];
                edge[ 1 ] = face[ k ];
                edge.sort( sortFunction );
                key = edge[0] + ' | ' + edge[1];
                if ( hash[ key ] == undefined ) {
        ...