三 JS - 如何用 Y 平面切割 3D 对象？

Posted 2023-02-27

【中文标题】三 JS - 如何用 Y 平面切割 3D 对象？

【英文标题】：Three JS - How to cut a 3D object with Y plane?

【发布时间】：2017-10-10 11:46:58

【问题描述】：

是否有可能使用 Three JS 切割具有我们可以移动的平面（主要是 Y 轴）的网格或对象？ 我想要这张图片中显示的相同功能：

目标是保持网格完整，以允许用户移动平面并查看 Y 平面功能的网格。

【问题讨论】：

您能否更具体地了解“剪切”的含义？我们是否应该假设您想在平面交点处添加新顶点以保持网格完整？您想要一个实体面，还是仅实体零件上的多个面？例如。在您的图像中，中心似乎是空心的，您是否要沿着尖端保留它？

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

查看三个.js 剪辑示例中的任何一个。例如：threejs.org/examples/webgl_clipping.html

这是一个效果视频，供任何无法加载 WebGL 的人使用：vimeo.com/144777216

【参考方案1】：

根据 WestLangley 的评论，他发布的 sample link 中的以下代码似乎与您要实现的目标相关：

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

【讨论】：

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