3D in Blogger with Three.js ~ Day 4: We Have Callbacks!

What's new today for blogging in 3D?

There's a new 'in your face' masthead to your right. Links to last year's apps have been lost for the moment, but a link to the new jaanga organization in GitHub has been added.

The really fun thing was that I added the ability for every post to have its own unique animation. Yesterday, every post could have different data or models but everything just spinned in an identical manner.

Here are the updated animate and render functions:

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() { 
  var tim = clock.getElapsedTime() * 0.15;
  for ( var i = 0, l = renderers.length; i < l; i++ ) {
    var r = renderers[i];
    r.controls.update();
    r.renderer.render( r.scene, r.camera );
    if (r.stats) { r.stats.update(); }
    if (r.callback) { 
      r.callback(); 
    } else {
      r.camera.position.x = 20 * Math.cos( tim  );
      r.camera.position.y = 20 * Math.cos( tim  );
      r.camera.position.z = 20 * Math.sin( tim );
    }
  }
}

The if statements mean that stats and callback are not required. The single line of code that I copy into each post is now:

  
renderers.push( { renderer: renderer, scene: scene, camera: camera, controls: controls, stats: stats, callback: callback } );

My review of Tony Parisi's book, WebGL: Up and Running now has a 'tonyBot' running over the book cover. This is a simplified version of the code I wrote that Tony used in the book. The issue with using the code like this in Blogger is that the code requires loading an external JSON file which contains all the vertex and face data for the tonyBot. Apart from images and videos Blogger does not support uploading and storing external files such as JSON files. Nowadays - with all  the restrictions on files and data from multiple file servers -  you cannot store a JSON file, say, on githubcom and and load it from a file hosted on blogger.com. [Actually, you can hack this quite easily but that will be shown in a future post.] So the workaround was to embed the data in the post and fool the JSONloader function into thinking it had actually loaded the file. It's tl;dr to explain but if you look at the source code to the post - and scroll down past the yards/meters of data you will see how this is done.

One unfortunate issue is that the the tonyBot in the post is preventing older posts from displaying and I haven't figured out why. Maybe it's a Blogger thing that prevents too much data going out all at once. Or maybe it a bit of stupidity on my part. Anyway, clicking on the link to the older posts at the bottom of the page works just fine

Coming up: the 3D bits for this post and for the 'Brain of Richard' as well. The latter, as of this writing, is currently appearing and disappearing as I move it between draft and published status while developing the code.


Link to code for demo in header
http://jaanga.github.com/blode/#jaanga.githb.com/Blode/We-have-Callbacks


Update 
The 3D portion with its own callback has been added to this post. It shows cubes flocking in space textured with a drawing of a lightning bolt by my daughter Cynthia.