title: Object Overflow Clipping Three JS
body: <p>Using three js is there anyway to define a clipping region for an object? I have for example a parent which contains child objects, I would like to clip the child objects based on the viewport.</p>
  
  <p>Something like...</p>
  
  <pre><code>// Create container and children
  var container = new THREE.Object3D();
  for(var i = 0; i &lt; 100; i++) {
      var geometry = new THREE.PlaneGeometry(i, 0, 0);
      var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
      var child = new THREE.Mesh(geometry, material);
      container.add(child);
  }
  
  // Create bounding box which is my viewport
  var geom = new THREE.Geometry();
  geom.vertices.push(new THREE.Vector3(0, 0, 0));
  geom.vertices.push(new THREE.Vector3(10, 0, 0));
  geom.vertices.push(new THREE.Vector3(10, 1, 0));
  geom.vertices.push(new THREE.Vector3(0, 1, 0));
  geom.computeBoundingBox();
  
  // Magic property (THIS DOESNT EXIST)
  container.clipRegion = geom.boundingBox;
  </code></pre>
  
  <p>The final part doesn't exist but is there any way to achieve this with three js? I potentially want to animate the children within the parent and only show the visible region defined by the bounding box.</p>
  
  <p><strong><em>Update, Added the following image to describe my problem.</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/lvOQ4.jpg" alt="clip region"></p>
  
  <p>The resulting red area is the region I want to make visible, whilst masking anything that lies outside of this region. All other content should be visible.</p>