Closing up clipped planes using shaders

I am working on a project that requires clipping planes for certain 3-D parts. My parts are created using triangular tesselation. The triangles itself are made up of vertices and the material used is MeshPhongMaterial. I also require a clipping plane in the geometry but it should cut the geometry such that it caps the cut surface.

I tried several methods available online, including the ones:

  1. Here -
  2. Here -

For the 2nd. one I realized that I am using an older version of threejs and hence I don’t have access to stencils. Any suggestions on how I can get access or add the custom libraries to my existing three.min.js file ?

For the first one, here is my code:

       var geometry = new THREE.BufferGeometry();
        geometry.setIndex(new THREE.BufferAttribute(indices, 1));
        geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.addAttribute('normal', new THREE.BufferAttribute(normals, 3, true));
        geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3, true));
        var planes = [
            new THREE.Plane(new THREE.Vector3(1, 0, 0), -1)
        var material = new THREE.MeshPhongMaterial({
            vertexColors: THREE.VertexColors,
            side: THREE.DoubleSide,
            transparent: transparent,
            opacity: 1,
            shininess: 30,
            reflectivity: 0.5,
            clippingPlanes: planes,
            clipIntersection: false
        material.onBeforeCompile = function (shader) {
            shader.fragmentShader = shader.fragmentShader.replace(
                `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
                `gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( diffuse, opacity );`

For some reason the .onBeforeCompile() does not add the required fragmentShader and my part still looks as shown in the picture: