Three JS - 如何使用Y平面切割3D物体？

Question

使用Three JS，可以通过平面（主要是Y轴）来切割网格或对象吗？我们可以移动这个平面吗？ 我想要的功能与此图片中显示的相同： 目标是保持网格完整，以允许用户移动平面并根据Y平面查看网格。

- Pouchopa

---

你能更具体地解释一下“切割”是什么意思吗？我们应该假设您想在平面交点处添加新的顶点以保持网格完整吗？您想要一个实心面，还是只在实体部分上有多个面？例如，在您的图像中，中心似乎是空心的，您是否试图沿着切割边缘保留它？ - Dan Bechard

如果您不关心网格是否有效，只想渲染看起来“切割”的东西，您可以通过在着色器中丢弃平面另一侧的片段来实现。 - Dan Bechard

请查看任何一个three.js剪裁示例。例如：http://threejs.org/examples/webgl_clipping.html - WestLangley

以下是一个视频效果，供无法加载WebGL的人观看：https://vimeo.com/144777216 - Dan Bechard

Answer 1

基于WestLangley的评论，他在示例链接中发布的以下代码似乎是您尝试实现的相关部分：

// ***** Clipping planes: *****
var localPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.8);

// Geometry
var material = new THREE.MeshPhongMaterial({
    color: 0x80ee10,
    shininess: 100,
    side: THREE.DoubleSide,

    // ***** Clipping setup (material): *****
    clippingPlanes: [ localPlane ],
    clipShadows: true
});

var geometry = new THREE.TorusKnotBufferGeometry(0.4, 0.08, 95, 20);

var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
scene.add(mesh);

- Dan Bechard

---

谢谢您的回答，而且速度这么快。我没有看到这个例子（有很多！）。我会看看它是否适用于我的3D对象。 - Pouchopa

这真的很有帮助！我想补充一点，为了使其正常工作，需要将渲染器的 localClippingEnabled 属性设置为 true。例如：const renderer = new THREE.WebGLRenderer({ canvas: myExampleCanvas }); renderer.localClippingEnabled = true;相关文档： https://threejs.org/docs/index.html?q=material#api/en/materials/Material.clippingPlanes - yaphi1

@yaphi1 很棒的上下文，感谢附加说明！ - Dan Bechard