ThreeJS - 使用自定义VertexShader扩展Lambert着色器

Question

我想在这里修改这个Shader： https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/ 一个标准的Lambert或Phong，它适用于场景中的所有灯光。

我目前的状态是我使用以下代码扩展Lambert：

    var attributes = {
    displacement: {
        type: 'f', // a float
        value: [] // an empty array
    }
};

var uniforms = {
    amplitude: {
        type: 'f', // a float
        value: 0
    }
};

var shaders = { mylambert : THREE.ShaderLib[ 'lambert' ] };

var materials = {};

materials.mylambert = function( parameters, myUniforms ) {

    var material = new THREE.ShaderMaterial( {

        vertexShader:  $('#vertexLambert').text(),
        fragmentShader: shaders.mylambert.fragmentShader,
        uniforms: THREE.UniformsUtils.merge( [ shaders.mylambert.uniforms, myUniforms ] ),
        attributes :attributes,
        lights:true,
        shading:THREE.FlatShading

    } );

    material.setValues( parameters );

    return material;

};

var myProperties = {
    lights: true,
    fog: true,
    transparent: true
};

var myMaterial = new materials.mylambert( myProperties, uniforms );

我从这篇文章得到的： extending lambert material, opacity not working

vertexShader基本上是shaders.mylambert.vertexShader的形状，但最上面是着色器示例中的附加代码。

它以某种方式起作用，因此顶点会移动，但是当它们改变形状时，面部不会变暗，因此当我使用平面作为网格时，它们总是具有相同的着色器。

总之; 我需要一个Lambert / Phong着色器，随着时间的推移上下操纵顶点以模拟低聚水表面。