Threejs normal values in shader are set to 0

Question

I'm trying to get this tutorial to work but I ran into two issues, one of which can be found here. The other one is the following.

For convenience this is the code that is supposed to work and here's a jsfiddle.

Vertex-shader:

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
attribute vec3 position;
uniform vec3 normal;
varying vec3 vNormal;

void main() {
    test = 0.5;
    vNormal = normal;
    gl_Position = projectionMatrix *
                modelViewMatrix *
                vec4(position,1.0);
}

Fragment-shader: varying mediump vec3 vNormal;

void main() {
    mediump vec3 light = vec3(0.5, 0.2, 1.0);

    // ensure it's normalized
    light = normalize(light);

    // calculate the dot product of
    // the light to the vertex normal
    mediump float dProd = max(0.0, dot(vNormal, light));

    // feed into our frag colour
    gl_FragColor = vec4(dProd, // R
                        dProd, // G
                        dProd, // B
                        1.0);  // A
}

The values for normal in the vertex shader or at least the values for vNormal in the fragment shader seem to be 0. The sphere that is supposed to show up stays black. As soon as I change the values for gl_FragColor manually the sphere changes colors. Can anybody tell me why this is not working?

Answer 1

In your vertex shader the vec3 normal should be an attribute (since each vertex has a normal) not a uniform:

attribute vec3 normal;

Here is the working version of your code.