Can't render a cube with three.js, when I have prepared the OO-structure of my application

Question

To render a cube or any other geometric figure with three.js is as clear as a crystal, when your code is rather simple, but when you are going to prepare a future structure of your application with some module logic in OO-style, you may got some problems. So have I...

If you doubt about my possibilities to rotate a cube with a SIMPLE code, you view a link at CodeReview to begin trust me :)

https://codereview.stackexchange.com/questions/33375/webgl-three-js-simple-application-only-js-without-html-css

But this question is about other problem... I've prepared an application in protype OO-style (which I suppose is primarily correctly designed), but I have a trouble with a simple render :(

Full source code: http://jsfiddle.net/85TXa/

There are NO errors in console, when I run it at localhost:

The part with requestAnimationFrame( opt... ) also didn't throw any exception to console:

And as you are able to see, the rendering required loop is able to be caught with the breakpoints... If to check the children collection of scene, there is a cube:

So... There is a mesh of cube geometry, which was successfully added. The loop with requestAnimationFrame/rendering process can be caught at any time.

I suggest... That may be a problem with the bind() function, which I've used in:

GC3D.Utils.prototype.renderScene = function() {
    // about bind()
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
    requestAnimationFrame( GC3D.Utils.prototype.renderScene.bind( this ) );
    this.renderer.render( this.scene, this.camera );

    // for test purpose only
    this.scene.children.filter(function( item ) {
        if ( item instanceof THREE.Mesh ) item.rotation.x += 0.02;
    });
    //
};

Maybe there is a problem right here? Please give me a piece of advice!

Thank you

PS: the code I'm publishing is truly developed by myself (you may also reserve my nickname on SO, it's a hint :) ), I also have positive resolution from my company to make these sources public, so don't be afraid of comments in the beginning of the js file :)

UPDATE #1: I've found, that I forgot to set a position of my Camera, I've added some code:

GC3D.Utils.prototype.setCameraPosition = function( camera, newPosition ) {
    if ( camera instanceof THREE.Camera ) camera.position.set( newPosition.x, newPosition.y, newPosition.z );
    else return -1;
};
...
this.utils.setCameraPosition( this.utils.camera, { x: 3, y: 3, z: 3 } );

But, no success! :( The box isn't shown... Console shows, that camera has new position, which I've set:

New full source code: http://jsfiddle.net/naFLN/

Answer 1

All is normally with the bind() function in GC3D.Utils.prototype.renderScene.

The actual problem was in forgetting appending renderer's DOM element to the body of document:

document.body.appendChild( this.utils.renderer.domElement );
this.utils.renderer.setSize( window.innerWidth, window.innerHeight );

The lines above repaired my application and now it works well!