Javascript 受灯光影响的三种js自定义材质

我有这样的材料：

<script id="vertexShader2" type="x-shader/x-vertex">
varying vec2 vUv;
void main() 
{ 
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>

<!-- fragment shader a.k.a. pixel shader -->
<script id="fragmentShader2" type="x-shader/x-vertex"> 
uniform sampler2D baseTexture;
uniform float baseSpeed;
uniform sampler2D noiseTexture;
uniform float noiseScale;
uniform float alpha;
uniform float time;

varying vec2 vUv;
void main() 
{
    vec2 uvTimeShift = vUv + vec2( -0.7, 1.5 ) * time * baseSpeed;  
    vec4 noiseGeneratorTimeShift = texture2D( noiseTexture, uvTimeShift );
    vec2 uvNoiseTimeShift = vUv + noiseScale * vec2( noiseGeneratorTimeShift.r, noiseGeneratorTimeShift.b );
    vec4 baseColor = texture2D( baseTexture, uvNoiseTimeShift );

    baseColor.a = alpha;
    gl_FragColor = baseColor;
}  
</script>


    var noiseTexture = new THREE.ImageUtils.loadTexture( 'img/wormholes/cloud.png' );
                        noiseTexture.wrapS = noiseTexture.wrapT = THREE.RepeatWrapping; 

                        var lavaTexture = new THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds'] );
                        lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping; 

                        this.earthUniforms = {
                            baseTexture:    { type: "t", value: lavaTexture },
                            baseSpeed:      { type: "f", value: 0.001 },
                            noiseTexture:   { type: "t", value: noiseTexture },
                            noiseScale:     { type: "f", value: 0.07337 },
                            alpha:          { type: "f", value: 10.0 },
                            time:           { type: "f", value: 1.0 }
                        };
                        animatedSurfaces.push(earthUniforms);

                        var customMaterial = new THREE.ShaderMaterial( 
                        {
                            uniforms: earthUniforms,
                              vertexShader:   document.getElementById( 'vertexShader2'   ).textContent,
                              fragmentShader: document.getElementById( 'fragmentShader2' ).textContent,
                            specular   : new THREE.Color("rgb(255,255,255)"),
                            shininess  : 0.1,                              
                            depthTest  : 0,
                            blending   : 1,
                            transparent: true,
                            bumpScale  : 1, //0.8
                            bumpMap    : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds_alpha'] ),
                            map        : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds'] ),
                            color      : 0xffffff,
                            //opacity    : 0.1,
                            emissive   : new THREE.Color("rgb(30,22,20)"),
                            alphaMap   : THREE.ImageUtils.loadTexture( "img/planets/"+value['texture_clouds_alpha']),
                        });

可变vec2 vUv；
void main（）
{ 
vUv=紫外线；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
纹理均匀；
均匀浮动基准速度；
均匀采样二维噪声结构；
均匀浮动噪声标度；
均匀浮动α；
均匀浮动时间；
可变vec2 vUv；
void main（）
{
vec2 uvTimeShift=vUv+vec2（-0.7,1.5）*时间*基本速度；
vec4 noiseGeneratorTimeShift=纹理2D（noiseTexture，uvTimeShift）；
vec2 uvNoiseTimeShift=vUv+noiseScale*vec2（noiseGeneratorTimeShift.r，noiseGeneratorTimeShift.b）；
vec4 baseColor=texture2D（baseTexture，uvNoiseTimeShift）；
baseColor.a=α；
gl_FragColor=基色；
}  
var noiseTexture=new THREE.ImageUtils.loadTexture（'img/wormholes/cloud.png'）；
noiseTexture.wrapps=noiseTexture.wrapT=THREE.RepeatWrapping；
var lavaTexture=new THREE.ImageUtils.loadTexture（“img/plants/”+value['texture_clouds'）；
lavaTexture.wrapps=lavaTexture.wrapT=THREE.RepeatWrapping；
这是我的工作服={
baseTexture:{type:“t”，值：lavaTexture}，
基本速度：{type:“f”，值：0.001}，
noiseTexture:{type:“t”，值：noiseTexture}，
噪声标度：{type:“f”，值：0.07337}，
alpha:{type:“f”，值：10.0}，
时间：{类型：“f”，值：1.0}
};
已设置动画的曲面。推（推）；
var customMaterial=新的三个.ShaderMaterial（
{
制服：地球制服，
vertexShader:document.getElementById（'vertexShader2'）.textContent，
fragmentShader:document.getElementById（'fragmentShader2'）.textContent，
镜面反射：新三色（“rgb（255255）”，
光泽度：0.1，
深度测试：0，
混合：1，
透明：是的，
比例：1，//0.8
bumpMap:THREE.ImageUtils.loadTexture（“img/plants/”+值['texture\u clouds\u alpha'），
map:THREE.ImageUtils.loadTexture（“img/plants/”+value['texture\u clouds'），
颜色：0xffffff，
//不透明度：0.1，
发射：新三种颜色（“rgb（30,22,20）”），
alphaMap:THREE.ImageUtils.loadTexture（“img/planets/”+值['texture\u clouds\u alpha'），
});

它与光发生反应，就像基本物质一样。 我需要像MeshLambert材质一样对alpha贴图做出反应

这意味着将“lavatexture”中的材质黑色配置为透明，并对光源产生反应。照亮的一侧具有漫反射颜色，阴影中的一侧具有镜面反射颜色

如何解决这个问题，当制服不让材质像meshLambertMaterial一样存在时，我无法设置漫反射和镜面反射颜色

但我需要那种制服效果。（熔岩效应）

---

r71

问题有点让人困惑。你只是想让你的材质受到灯光的影响？。我有一个应用程序，其中我添加了自定义着色器的实验。也许最后一个会引起你的兴趣，因为我添加了灯光。谢谢你的指导。我会试着和你一起玩。