Update: Take the advice from WestLangley. I will keep this as an alternative method, although it may not be as efficient for clipping.
It's a fact that clipping planes are infinite. So, what's the workaround? Implement multiple clipping planes in multiple render passes!
To achieve this, you'll have to disable auto-clearing and manually clear the buffer yourself.
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
Assume that your current clipping plane is named plane1.
material = new THREE.MeshPhongMaterial( {
...
clippingPlanes: [
plane1,
],
clipShadows: true
} );
var myMesh = new THREE.Mesh(geometry, material);
This will clip the top half of myMesh when you render. To work with the remaining portion, proceed with the following steps.
Firstly, create another plane, let's call it plane2, which is the inverse of plane1. This means that plane2 will clip the BOTTOM of myMesh. By rendering one pass using plane1 and another using plane2, you can get back the full mesh. Now, introduce a third clip plane, plane3, which only clips the desired half of myMesh. When you include both plane2 and plane3 in the same render pass, only 1/4 of myMesh will be rendered.
var pass1ClipPlanes = [
plane1
],
pass2ClipLanes = [
plane2, // this plane is the inverse of plane 1, so it clips the opposite of plane1
plane3 // this clips the left/right half of the model
];
When you're ready to render, make sure to clear the draw buffers first before executing two render passes while updating the clip planes between them.
// clear the draw buffers
renderer.clear();
// clip the top
myMesh.material.clipPlanes = pass1ClipPlanes;
renderer.render(scene, camera);
// clip the bottom and one side
myMesh.material.clipPlanes = pass2ClipPlanes;
renderer.render(scene, camera);
The initial pass will render the bottom part of the model, while the second pass will render half of the top part.
Estimated Time of Arrival (ETA): Example
var renderer, scene, camera, controls, stats;
var cube,
pass1ClipPlanes,
pass2ClipPlanes;
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight,
FOV = 35,
NEAR = 1,
FAR = 1000;
// Remaining code for initialization, resize, rendering, and animation...