对象溢出剪辑三个JS

Question

无论如何使用三个j来定义对象的剪切区域？我有一个包含子对象的父对象，我想根据视口剪切子对象。

像...一样的东西。

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

最后一部分不存在，但有没有办法用三个j来实现这个目标？我可能希望为父级中的子项设置动画，并仅显示由边界框定义的可见区域。

更新，添加了以下图片来描述我的问题。

生成的红色区域是我想要显示的区域，同时屏蔽位于该区域之外的任何内容。所有其他内容都应该可见。

Answer 1

我已经能够用另一个物体剪辑物体了。

查看此处的结果

fiddle

在这个小提琴中，你会看到一个被球体夹住的立方体。由于这是一个演示，有些东西不是最终的代码。

屏幕右侧有另一个摄像机视图，您可以从高静态点视图中看到场景。

此外，应该剪裁的立方体部分，而不是这个显示为绿色。在片段着色器中，您必须取消注释discard语句才能实现真正的剪切。

if (shadowColor.r < 0.9) {
    gl_FragColor = vec4 (0.3, 0.9, 0.0, 1.0);
} else {
    gl_FragColor = vec4 (0.8, 0.8, 0.8, 1.0);
    // discard;
}

它的工作原理是创建一个可投射阴影的聚光灯

clippingLight = new THREE.SpotLight (  0xafafaf, 0.97  );
clippingLight.position.set (100, 200, 1400);
clippingLight.castShadow = true;
scene.add (clippingLight);

必须进行剪裁的对象会投射阴影，而要剪裁的对象会收到阴影。

然后，在动画中，我们将此灯设置为摄像机位置

function animate() {
cameraControls.update();
clippingLight.position.x = camera.position.x;
clippingLight.position.y = camera.position.y;
clippingLight.position.z = camera.position.z;
requestAnimationFrame(animate);
}

现在，在剪切对象中必须可见的部分是阴影处的部分。我们需要一个处理它的着色器。 frag着色器代码取自three.js库中的标准代码，稍加修改。

我在使用three.js时非常新，所以代码中有很多东西可以做得更好。只是采取这个想法： - ）