How to render clipped surfaces as solid objects

Question

In Three.js, I have a 3d object where I am using local clipping planes to only render a part of the object.

However, since 3d objects are "hollow" (meaning only the outer surface is rendered), when we clip anything off that surface we can "see into" the object. Here's an example of what I mean, clipping a corner off a cube. Notice how we can see the backside of the opposite corner.

I would like to give the appearance of the object being solid. Based on this issue, it seems that the best way to accomplish this is to create a surface over the clipped region, thus capping the hole and making the object appear like it isn't hollow.

My question is, how do I know where to build this surface? Does Three.js provide a way to get a list of vertices that intersect between a plane and any arbitrary surface? If not, how might I approach this problem myself?

I found this question, but the author didn't describe how they solved the problem I am having here.

Answer 1

You want to render a clipped surface as if it were a solid -- i.e., not hollow.

You can achieve that effect with MeshPhongMaterial -- or any three.js material for that matter -- with a simple hack to the material shader.

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 );`

    );
};

This should look pretty good. It will require material.side = THREE.DoubleSide;

Alternatively, see https://threejs.org/examples/webgl_clipping_stencil.html.

three.js r.117

Answer 2

I made a THREE.SectionHelper class which could be interesting if you want to set a different material/color for the inside of the mesh that you are clipping. Check a demo in this fiddle.

var sectionHelper = new THREE.SectionHelper( mesh, 0xffffff );
scene.add(sectionHelper);