Custom shader - Three.js

Question

I am trying to use a custom shader with Three.js. I tried to do it like the many examples, but it doesn't work. My code is:

var vertex = "void main(){vec4 mvPosition = modelViewMatrix * vec4( position, 1.0    );gl_Position = projectionMatrix * mvPosition;}";
var fragment = "precision highp float;void main(void){gl_FragColor = vec4(0.0,1.0,0.0,1.0);}";
material = new THREE.ShaderMaterial({
                vertexShader: vertex,
                fragmentShader: fragment
        });
var mesh = new THREE.Mesh(geometry,material);

…and everything is blank. But if I use this material :

material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

…everything works perfectly. What's wrong?

Answer 1

I found the problem: I had to use:

 renderer = new THREE.WebGLRenderer();

instead of :

 renderer = new THREE.CanvasRenderer();