对象溢出剪辑三个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

我已经能够用另一个物体夹住一个物体。

在这里查看结果

小提琴

在这个小提琴中，您将看到一个立方体被一个球体夹住。由于这是一个演示，因此有些内容不是最终代码。

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

此外，立方体中应该被剪切的部分显示为绿色。在片段着色器中，必须取消注释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);

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

然后，在 animate 中，我们将此灯设置为相机位置

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

现在，剪切对象中必须可见的部分是阴影处的部分。我们需要一个着色器来处理这个问题。碎片着色器代码取自 Three.js 库中的标准代码，仅稍作修改。

我对 Three.js 非常陌生，所以代码中可能有很多东西可以做得更好。只是接受这个想法:-)