对象溢出裁剪三 JS [英] Object Overflow Clipping Three JS

问题描述

无论如何使用三个js来定义一个对象的剪切区域?例如，我有一个包含子对象的父对象，我想根据视口剪辑子对象.

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.

有点像……

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

最后一部分不存在但是有没有办法用三个js来实现这一点?我可能想要为父级中的子级设置动画，并且只显示由边界框定义的可见区域.

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.

更新，添加了下图来描述我的问题.

由此产生的红色区域是我想要显示的区域，同时掩盖该区域之外的任何内容.所有其他内容都应该可见.

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.

推荐答案

我已经能够用另一个对象剪辑一个对象.

I have been able to clip an object with another.

在此处查看结果

小提琴

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

In this fiddle you will see a cube being clip by an sphere. Since this is a demo, there are some things that are not the final code.

您在屏幕的右侧有另一个相机视图，您可以在其中从高处静态视角查看场景.

You have in the right hand of the screen another camera view, where you see the scene from a high, static point view.

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

Also, the part of the cube that should be clipped, instead of this is showed green. In the fragment shader, you have to uncomment the discard statement to achieve real clipping.

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

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

It works by creating a spot light that can cast shadows

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

需要裁剪的对象投射阴影，被裁剪的对象接收阴影.

The object that has to do the clipping casts shadows, and the object to be clipped receives shadows.

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

Then, in the animate , we set this light to the camera location

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 库中的标准代码，只是稍作修改.

Now, the parts that have to be visible in the clipped object are the ones at the shadow. We need a shader that handles that. The frag shader code is take from the standard one in the three.js library, just slightly modified.

我对three.js非常陌生，所以代码中可能有很多可以做得更好的地方.只要接受这个想法:-)

I am very new working with three.js, so probably there are a lot of thing in the code that can be done better. Just take the idea :-)

这篇关于对象溢出裁剪三 JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！