Creating a cube or any other geometric figure with three.js can be crystal clear when your code is simple. However, when trying to incorporate module logic in an OO-style structure for your application, you might encounter some challenges. I have faced similar issues...
If you are skeptical about my ability to rotate a cube with a SIMPLE code, you can visit this link on CodeReview to start trusting me :)
However, the problem I am facing now is different... I have developed an application using prototype OO-style (which I believe is properly designed), but I am having trouble with rendering :(
Here is the full source code: http://jsfiddle.net/85TXa/
There are NO errors in the console when I run it locally:
The part with requestAnimationFrame( opt... ) also does not throw any exceptions to the console:
And as you can see, the rendering loop required can be interrupted with breakpoints... If you check the children collection of the scene, there is a cube:
So... There is a cube mesh added successfully. The loop with requestAnimationFrame/rendering process can be interrupted at any time.
I suspect... There might be an issue with the bind() function, which I have 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 testing purposes only
this.scene.children.filter(function( item ) {
if ( item instanceof THREE.Mesh ) item.rotation.x += 0.02;
});
//
};
Could there be a problem right here? Please offer me some advice!
Thank you
PS: the code I am sharing is genuinely developed by me (you can also recognize my nickname on SO, as a hint :)), I have received approval from my company to make these sources public, so do not be alarmed by the comments at the beginning of the js file :)
UPDATE #1:
I realized that I forgot to set the position of my Camera, so I 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 } );
Unfortunately, it didn't solve the issue! The cube is still not visible... The console indicates that the camera has the new position I set:
New full source code: http://jsfiddle.net/naFLN/