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 acplish 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.

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 acplish 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.

• javascript
• 3d
• three.js
• shader
• clip

• Can you provide a live link to a realistic use case that demonstrates your true constraints? Are textures involved? What material are you using? What are you willing to promise? – WestLangley Commented May 7, 2016 at 18:43
• @WestLangley Sure, this simple example demonstrates my problem. I would like to cover up the openings so you can't see inside the shape. I am not using textures, just a basic MeshPhongMaterial. Performance is my priority, so if this can only be done in a performant way on simple shapes, then so be it. But I would like to know if it's possible to do this in a general way that can be applied to any shape. – Cameron Edwards Commented May 7, 2016 at 19:35

2 Answers 2

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(

        '#include <output_fragment>',

        `
        vec3 backfaceColor = vec3( 0.4, 0.4, 0.4 );
        gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( backfaceColor, opacity );
        `
    )
};

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

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

three.js r.148

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