如何将剪切面渲染为实体对象

Question

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

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

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

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

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

Answer 1

您想将裁剪表面渲染为实体——即，不是空心的。

您可以使用 MeshPhongMaterial 或任何 three.js material 实现该效果 - 只需对 material 着色器进行简单的修改即可。

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

Answer 2

我做了一个THREE.SectionHelper class which could be interesting if you want to set a different material/color for the inside of the mesh that you are clipping. Check a demo in this fiddle.

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

如何将剪切面渲染为实体对象

How to render clipped surfaces as solid objects

javascript

3d

three.js

shader

clip