Fragment shader with reflection issue three.js

Question

I have gltf CUP model with texture and PBR effect. I want to apply reflection of the environment(Cubereflection). Facing issue while applying reflection.Color and texture changed and only env reflection is coming. I am unable to solve this issue. Where is my shader is wrong or some other issue. I don't have much knowledge on shader program. How should I get the proper color(as like first image) with reflection. I have attached two images without reflection and with reflection. Reflection is working fine but don't have any clue why this this proper color is not comming. Kindly help?

   my shader programme.
        var meshlambert_vert =
        varying vec3 vReflect;
        varying vec3 vRefract[3];
        varying float vReflectionFactor;
        attribute vec3 a_normal;
        varying vec3 v_normal;
        varying vec3 v_position;
        uniform mat3 u_normalMatrix;
        void main() {
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                v_position = mvPosition.xyz;
                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
                vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
                vec3 I = worldPosition.xyz - cameraPosition;
                vReflect = reflect( I, worldNormal );
                v_normal = u_normalMatrix * a_normal;
                vRefract[0] = refract( normalize( I ), worldNormal, 0.02 );
                vRefract[1] = refract( normalize( I ), worldNormal, 0.02 * 0.2);
                vRefract[2] = refract( normalize( I ), worldNormal, 0.02 * 0.2 );
                vReflectionFactor = 0.1 + 1.0 * pow( 1.0 + dot( normalize( I ), worldNormal ), 0.2 );
                gl_Position = projectionMatrix * mvPosition;
        };


var meshlambert_frag =
    uniform samplerCube tCube;
    varying vec3 vReflect;
    varying vec3 vRefract[3];
    varying float vReflectionFactor;
    uniform vec4 u_ambient;
    uniform vec4 u_emission;
    uniform vec4 u_specular;
    uniform vec4 u_diffuse;
    varying vec3 v_normal;
    varying vec3 v_position;
    void main() {
        vec4 color = vec4(0., 0.29411,0.47843, 1.0);
        vec3 diffuseLight = vec3(0., 0., 0.);
        vec3 u_light2Color = vec3(1.0,1.0,1.0);
        vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
        vec3 specularLight = vec3(0.5, 0.5,0.5);
        float specularIntensity = 0.5;
        float attenuation = 0.5;
        vec3 l = vec3(0.0,0.5,0.5);
        vec3 u_light0Color = vec3(1.0,1.0,1.0);
        vec4 emission;
        vec4 ambient;
        vec4 specular;
        ambient = u_ambient;
        diffuse = u_diffuse;
        emission = u_emission;
        specular = u_specular;
        vec3 ambientLight = vec3(0., 0., 0.);
        ambientLight += u_light2Color;
        ambient.xyz *= ambientLight;
        color.xyz += ambient.xyz;
        specularLight += u_light0Color * specularIntensity;
        specular.xyz *= specularLight;
        color.xyz += specular.xyz;
        vec3 normal = normalize(v_normal);
        if ( dot( normal, v_position ) > 0.0 ) {
            normal *= -1.0;
        }
        diffuseLight += u_light0Color * max(dot(normal,l), 0.) * attenuation;
        diffuse.xyz *= diffuseLight;
        color.xyz += diffuse.xyz;
        color.xyz += emission.xyz;
        vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
        vec4 refractedColor = vec4( 0.0 );
        refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;
        refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;
        refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;
        gl_FragColor = mix( color, reflectedColor, clamp( 0.98, 0.0, 1.0 ) );
    }";

cubmaping code with reflection:

var loader = new THREE.CubeTextureLoader();
        loader.setPath( 'textures/env1/' );

        var textureCube = loader.load( [
            'posx.jpg', 'negx.jpg',
            'posy.jpg', 'negy.jpg',
            'posz.jpg', 'negz.jpg'
        ] );
    textureCube.mapping = THREE.CubeReflectionMapping;

    var cubeShader = THREE.ShaderLib[ "cube" ];
    var cubeMaterial = new THREE.ShaderMaterial( {
            fragmentShader: cubeShader.fragmentShader,
            vertexShader: cubeShader.vertexShader,
            uniforms: cubeShader.uniforms,
            depthWrite: false,
            side: THREE.BackSide
        } );

        cubeMaterial.uniforms[ "tCube" ].value = textureCube;

    cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
    scene.add( cubeMesh );
var sphereMaterial=new THREE.MeshLambertMaterial( {envMap: textureCube } );
                    object.traverse( function ( child ) {
                        if ( child instanceof THREE.Mesh ) {
                             child.material = sphereMaterial;

                         }
                     } );

Answer 1

You mix the reflection color and the color of the material by a constant ratio of 98:2

gl_FragColor = mix( color, reflectedColor, clamp( 0.98, 0.0, 1.0 ) );

The color component of the material is to weak to "see" it.

Try a ration of 50:50 for debug reasons:

gl_FragColor = mix( color, reflectedColor, 0.5 );

But probably you want to us vReflectionFactor for the ratio:

gl_FragColor = mix( color, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );

---

Further note, if you use vReflectionFactor, then you will see the reflection only, because the result of

vReflectionFactor = 0.1 + 1.0 * pow( 1.0 + dot( normalize( I ), worldNormal ), 0.2 );

is always greater than 1.0. This is caused, because 1.0 + dot( normalize( I ), worldNormal is grater than 1.0.

I don't know what you want to achieve, but you can use

vReflectionFactor = 0.1 + pow( dot(normalize(I), worldNormal), 0.2 );

or

vReflectionFactor = 0.1 + pow( 1.0 - dot(normalize(I), worldNormal), 0.2 );