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:
- Here - https://stackoverflow.com/questions/37090942/how-to-render-clipped-surfaces-as-solid-objects/37093210#37093210
- Here - 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:
