# Closing up clipped planes using shaders

**URL:** <https://discourse.threejs.org/t/closing-up-clipped-planes-using-shaders/18030>\
**Category:** Questions\
**Tags:** clipping-planes, shaders\
**Created:** [August 20, 2020, 2:39pm UTC](https://discourse.threejs.org/t/closing-up-clipped-planes-using-shaders/18030 "2020-08-20T14:39:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahul.pillai93](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rahul.pillai93](https://discourse.threejs.org/u/rahul.pillai93)\
**Post date:** [August 20, 2020, 2:39pm UTC](https://discourse.threejs.org/t/closing-up-clipped-planes-using-shaders/18030/1 "2020-08-20T14:39:14Z")

</div>

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 - [https://stackoverflow.com/questions/37090942/how-to-render-clipped-surfaces-as-solid-objects/37093210#37093210](https://stackoverflow.com/questions/37090942/how-to-render-clipped-surfaces-as-solid-objects/37093210#37093210)
2. Here - [https://threejs.org/examples/?q=sten#webgl\_clipping\_stencil](https://threejs.org/examples/?q=sten#webgl_clipping_stencil).

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:

 ![Untitled2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cd5075f8493d93805f87e8d40124d1fae7011e8f.png)