Three.js 将剪辑添加到THREE.ShaderMaterial_Three.js_Glsl

Three.js 将剪辑添加到THREE.ShaderMaterial

three.js glsl

Three.js 将剪辑添加到THREE.ShaderMaterial,three.js,glsl,Three.js,Glsl,我正在尝试创建一个着色器，该着色器考虑了我在场景中定义的剪裁平面。这些剪裁平面适用于我使用的所有“普通”材质：THREE.MeshLambertMaterial、THREE.MeshPhongMaterial和THREE.MeshPhysicalMaterial，但是THREE.ShaderMaterial缺少此实现。这是我的意思的一个例子：在此示例中，有两个立方体，一个具有THREE.MeshStandardMaterial，另一个具有由THREE.ShaderMaterial定义的材质。带

我正在尝试创建一个着色器，该着色器考虑了我在场景中定义的剪裁平面。这些剪裁平面适用于我使用的所有“普通”材质：

THREE.MeshLambertMaterial

、

THREE.MeshPhongMaterial

和

THREE.MeshPhysicalMaterial

，但是

THREE.ShaderMaterial

缺少此实现。这是我的意思的一个例子：

在此示例中，有两个立方体，一个具有

THREE.MeshStandardMaterial

，另一个具有由

THREE.ShaderMaterial

定义的材质。带有

3.mesh标准材质的立方体剪辑正常。具有THREE.ShaderMaterial的立方体不会剪裁
（我通常不在脚本标记中定义顶点/片段着色器，正如我在JSFIDLE中所显示的那样，而是以与此类似的方式定义它们：）
因此，有几个问题：
THREE.ShaderMaterial是否应包括从框中剪切平面？（有一个剪裁属性，但不确定它启用了什么）
如果没有，如何修改此着色器以包含必要的参数和着色器块以启用剪裁
实际上，剪辑是在三个.js着色器中完成的
要使其工作，您必须在着色器内部处理它，方法是添加以下4个“着色器块”：

在顶点着色器的顶部
在顶点着色器的main（）
内
在片段着色器的顶部
在片段着色器的main（）
内

只需将#include
添加到着色器中，即可访问这些块
然后，设置material.clipping=true并且它应该可以工作
看看这个

注意
为了使着色器工作，我还添加了和
我检查了电流，以了解把这些块放在哪里

注2
此代码应与使用字符串数组实现的着色器一起使用，但请注意，也可以使用THREE.ShaderChunk[（块名）]


这应该更适合你的情况。
谢谢@neeh，这让我有点发疯。我错过了begin_顶点和project_顶点块！我不断收到与mvPosition
相关的错误，但我没有关注定义该位置的块。再次感谢！谢谢这个答案中最重要的部分是，要设置的属性是ShaderMaterial的clipping
。。。其他材料中不存在。更新的fiddle：修复了损坏的OrbitControls实例化（并添加了PlaneHelper
，使剪辑更清晰）@neeh谢谢兄弟，你让我的日子在2020年也变得美好。我不知道我必须在shaderMaterial中启用剪裁。谢谢：）