Question

我有这个材料：

<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']),
                        });

它与MeshBasic材料之类的光反应。我需要像MeshLambert材料和alpha map一样做出反应。

这意味着将“lavatexture”中的材料黑色配置为透明，并对光源作出反应。点亮的一面有漫反射的颜色，一面在阴影处有镜面颜色。

如何解决这个问题，当制服不让材料像meshLambertMaterial那样时，我不能设置漫反射和镜面反射颜色。

但我需要那种制服效果。（熔岩效果http://stemkoski.github.io/Three.js/Shader-Animate.html）

R71

受光影响的三种js定制材料

0 个答案: