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: enter image description here

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

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:

enter image description here

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:

enter image description here New full source code: http://jsfiddle.net/naFLN/

Unknown Unknown · Accepted Answer · 2014-03-02T17:28:05

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!

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

1 Answers