将剪辑添加到THREE.ShaderMaterial

Question

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

在此示例中，有两个立方体，一个带有a 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着色器内部完成的。

为了使其工作，您必须在着色器中处理它，方法是添加这四个“着色器块”：

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

您只需添加#include <(chunk name)>到着色器即可访问这些块。

然后，设置material.clipping = true;，它应该工作。

检查这个小提琴。

注意

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

我检查了当前的phong着色器实现，以了解将这些块放在哪里。

笔记2

此代码应与通过字符串数组实现的着色器一起使用，但请注意，您也可以使用引用着色器块THREE.ShaderChunk[(chunk name)]。
这应该更适合您的情况。