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 th

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