Why doesn't the light in this scene work?

Question

I wrote a game class with coffeescript that displays a plain and a rotating cube. You can see the code here: http://jsfiddle.net/6eRzt/6/

All is dandy, except for two things:

1) I have to do an ugly hack to get the requestAnimationFrame callback working:

var sh = new App();
sh.start();

function animate() {
    sh.animate();
    requestAnimationFrame(animate);
}

animate();​

2) This is my major concern: The SpotLight does not work. I tried to replicate the behavior from another JSFiddle (referenced in this Question), but without success. Maybe it's just a stupid typo, or maybe I'm doing it wrong.

Plus: Am I on the wrong track with my App class? All the three.js examples I found so far use plain functions to get stuff running.

Answer 1

Regarding your major concern, you need to use WebGLRenderer instead of CanvasRenderer.

Fiddle: http://jsfiddle.net/6eRzt/10/

EDIT: There are a lot of ways of addressing your first concern. Everyone will have his own opinion.

Here is how I would do it. The closure keeps the variables from polluting the global namespace; there is no need for all of your this references.

Fiddle #2: http://jsfiddle.net/6eRzt/11/