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

Question

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

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

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

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

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

Answer 1

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

您可以使用 MeshPhongMaterial 或与此相关的任何 three.js Material 来实现这种效果，只需对 Material 着色器进行简单的修改即可。

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        '#include <output_fragment>',

        `
        vec3 backfaceColor = vec3( 0.4, 0.4, 0.4 );
        gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( backfaceColor, opacity );
        `
    )
};

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

或者，参见 https://threejs.org/examples/webgl_clipping_stencil.html .

three.js r.148