你如何“结合”ShaderMaterial和LambertMaterial？

Question

首先，非常感谢这个伟大的工作和社区。

我正在尝试写一种简单的低聚风水材料。

我知道有不同的方式来编写这种东西，我希望尽可能在js脚本中做到这一点（我来自C＃dev'，而且我还没有超级舒适的前端）。

在网上编辑信息数小时后，我能理解的一种方法是：

var waterVertexShader =  
                "attribute float vertexDisplacement;" +
                "uniform float time;" +
                "varying vec3 vUv;" +
                "void main() {" +
                "   vUv = position;" +
                "   vUv.y += sin(time) * 0.01;" +
                "   gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+     
                "}"
            ;

            var waterFragmentShader =

                "void main() {" +
                "gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
                "}";


                },
                flatShading : true,
                vertexShader: waterVertexShader,

这给了我通缉行为的开始，但这不是我的问题。

现在，如果我想继承让我们说Lambert或Phong材料属性，那么正确的方法是什么？

这听起来很基本，但这是我发现的唯一相关链接：ThreeJS - Extend Lambert Shader with Custom VertexShader并没有答案。

感谢您的关注。

Answer 1

有几种方法可以增强three.js中的内置材质：

• 你可以使用回调Material.onBeforeCompile()。这种方法在以下example中得到证明。如果您只想为着色器代码添加一些小的增强功能，这应该是您的首选。
• 从头开始使用RawShaderMaterial或ShaderMaterial创建自定义材质，并重用库中现有的着色器块。这种方法非常灵活，但需要很好地了解three.js材料系统的内部结构。
• 当然你可以修改/猴子补丁现有的着色器块，但这种方法通常是推荐的（你有效地改变库代码的所有后果）。
• 另一种方法是使用有前途但实验性的NodeMaterial。但是，这种技术尚未记录，到目前为止还没有核心部分。有一些例子证明了像one这样的用法。