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

Question

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

然而，由于3d物体是空心的＆＃34; （意味着只有外表面被渲染），当我们从表面上剪下任何东西时，我们可以＆＃34;看到＆＃34;物体。这是我的意思的一个例子clipping a corner off a cube。请注意我们如何看到对面角落的背面。

我想让对象的外观变得坚固。基于this issue，似乎最好的方法是在剪切区域上创建一个曲面，从而限制孔并使对象看起来像是不是空心的。

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

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

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

Answer 2

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

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