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

Question

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

但是,由于3d对象是"空心的"(意味着只渲染外表面),当我们从该表面剪切任何东西时,我们可以"看到"该对象.这是我的意思的一个例子,从立方体上剪下一个角落.注意我们如何看到对面角落的背面.

我想让对象的外观坚固.基于这个问题,似乎最好的方法是在剪切区域上创建一个表面,从而限制孔并使对象看起来像不是空心的.

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

我发现了这个问题,但作者没有描述他们是如何解决我在这里遇到的问题的.

Answer 1

你想渲染一个剪裁的表面,好像它是一个固体 - 即,不是空心的.

您可以使用MeshPhongMaterial- 或任何three.js材料 - 通过对材质着色器的简单破解来实现该效果.

将此行替换为/src/renderers/shaders/ShaderLib/meshphong_frag.glsl:

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

同

if ( gl_FrontFacing ) {

    gl_FragColor = vec4( outgoingLight, diffuseColor.a );

} else {

    gl_FragColor = diffuseColor;

}

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

three.js r.76