5

无论如何使用三个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;

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

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

剪辑区域

生成的红色区域是我想要使其可见的区域，同时掩盖了该区域之外的任何东西。所有其他内容都应该可见。

4

1 回答 1

1

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

在这里查看结果

小提琴

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

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

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

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

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

我是使用three.js 的新手，所以代码中可能有很多可以做得更好的东西。接受这个想法:-)

于 2014-05-10T10:54:31.923 回答