three.js - オブジェクトオーバーフロークリッピング3つのJS

Question

3つのjsを使用して、オブジェクトのクリッピング領域を定義する方法はありますか？たとえば、子オブジェクトを含む親があります。ビューポートに基づいて子オブジェクトをクリップしたいと思います。

何かのようなもの...

// Create container and children
var container = new THREE.Object3D();
for(var i = 0; i < 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;

最後の部分は存在しませんが、3つのjsでこれを達成する方法はありますか？親内の子をアニメートし、バウンディングボックスで定義された表示領域のみを表示したい場合があります。

更新、私の問題を説明するために次の画像を追加しました。

結果として得られる赤い領域は、この領域の外側にあるものをすべてマスクしながら、表示したい領域です。他のすべてのコンテンツが表示されている必要があります。