如何将剪裁的曲面渲染为实体对象答案

【问题标题】：How to render clipped surfaces as solid objects如何将剪裁的曲面渲染为实体对象
【发布时间】：2016-09-02 14:56:52
【问题描述】：

在 Three.js 中，我有一个 3d 对象，我在其中使用本地剪切平面来仅渲染对象的一部分。

但是，由于 3d 对象是“空心的”（意味着只渲染外表面），当我们从该表面剪下任何东西时，我们可以“看到”对象。这是我的意思的一个例子，clipping a corner off a cube。注意我们是如何看到对角的背面的。

我想让物体看起来是实心的。基于this issue，似乎实现此目的的最佳方法是在剪切区域上创建一个表面，从而盖住孔并使对象看起来不是空心的。

我的问题是，我怎么知道在哪里构建这个表面？ Three.js 是否提供了一种方法来获取平面和任意曲面之间相交的顶点列表？如果没有，我该如何自己解决这个问题？

我找到了this question，但作者没有描述他们是如何解决我在这里遇到的问题的。

【问题讨论】：

您能否提供一个真实用例的实时链接来展示您的真正约束？是否涉及纹理？你用什么材料？你愿意妥协什么？
@WestLangley 当然，这个simple example 说明了我的问题。我想盖住开口，这样你就看不到形状的内部了。我没有使用纹理，只是一个基本的 MeshPhongMaterial。性能是我的首要任务，所以如果这只能在简单的形状上以高性能的方式完成，那就这样吧。但我想知道是否有可能以一种可以应用于任何形状的通用方式来做到这一点。

标签： javascript 3d three.js shader clip

【解决方案1】：

您希望将裁剪后的表面渲染为实心——即不是空心的。

您可以使用 MeshPhongMaterial 或任何相关的 three.js 材质来实现该效果，只需简单地修改材质着色器即可。

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,

        `gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( diffuse, opacity );`

    );
};

这应该看起来不错。它将需要material.side = THREE.DoubleSide；

或者，请参阅https://threejs.org/examples/webgl_clipping_stencil.html。

three.js r.117

【讨论】：

@WestLangley 使用纹理时，我会在剪裁的表面上发生 z-fighting。这是我可以避免的吗？
@WestLangley，我也打过z。我想知道是否可以避免这种情况！
@WouterCoebergh 如果您自己无法解决问题，最好发布一个新帖子并提供足够的信息来复制该问题。
我喜欢这个 hack @WestLangley 但是如果你碰巧在空心几何体中有另一个几何体，那么仍然会渲染那个几何体。随着深度测试的开启。我说的对吗？
@WestLangley。我尝试执行您提供的“onBeforeCompile”代码，但它不能解决问题。知道我可能做错了什么吗？我的几何图形是 THREE.BufferGeometry() ，材质是 MeshPhongMaterial() ，如您所提到的，侧面属性 = THREE.DoubleSide。此外，我通过添加顶点位置和颜色作为缓冲区属性来创建几何图形。

【解决方案2】：

我创建了一个THREE.SectionHelper 类，如果您想为要剪裁的网格内部设置不同的材质/颜色，这可能会很有趣。检查a demo in this fiddle。

var sectionHelper = new THREE.SectionHelper( mesh, 0xffffff );
scene.add(sectionHelper);

【讨论】：

如果您将其他项目添加到场景中，这将无济于事。例如，在您的演示示例中，如果我将线框辅助颜色更改为红色。线框助手=新的三线框助手（网格，0xff0000）；后面的所有边缘都是可见的。