添加剪贴到THREE.ShaderMaterial

Question

我正在尝试创建一个着色器，它考虑了我在场景中定义的剪裁平面。这些剪裁平面适用于我正在使用的所有“香草”材料：THREE.MeshLambertMaterial，THREE.MeshPhongMaterial和THREE.MeshPhysicalMaterial，但THREE.ShaderMaterial缺少此实现。这是我的意思的一个例子：https://jsfiddle.net/fraguada/27LrLsv5/

在此示例中，有两个多维数据集，一个包含THREE.MeshStandardMaterial，另一个包含由THREE.ShaderMaterial定义的材料。带有THREE.MeshStandardMaterial剪辑的多维数据集可以。带有THREE.ShaderMaterial的多维数据集不会剪辑。

（我通常不会在jsfiddle中显示脚本标签中的顶点/片段着色器，而是以与此类似的方式定义它们：https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/BasicShader.js。）

所以，有几个问题：

1. THREE.ShaderMaterial应该包括开箱即用的剪贴画吗？ （有剪辑属性，但不确定它启用了什么）
2. 如果没有，我如何修改此着色器以包含必要的参数和着色器块以启用裁剪？

Answer 1

实际上，裁剪是在 Three.js 着色器内完成的。

要使其正常工作，您必须在着色器中处理它，方法是添加4个＆＃34;着色器块＆＃34; ：

顶点着色器顶部的
• clipping_planes_pars_vertex.glsl;
• clipping_planes_vertex.glsl位于您的顶点着色器的main()内;
片段着色器顶部的
• clipping_planes_pars_fragment.glsl;
• clipping_planes_fragment.glsl位于片段着色器的main()内。

只需将<{1}}添加到着色器即可访问这些块。

然后，设置#include <(chunk name)>，它应该有效。

选中fiddle。

注意

要使着色器正常工作，我还添加了begin_vertex.glsl和project_vertex.glsl。

我检查了当前phong shader implementation以了解放置这些块的位置。

注2

此代码应与使用字符串数组实现的着色器一起使用，但请注意，您还可以使用material.clipping = true;引用着色器块。
这应该更适合你的情况。