Friday, October 12, 2012

Giving Jaanga A Little 3D Love

In the top right hand corner, there is a colored spinning cube. If you cannot see it, the your browser does not support WebGL.

If you can see it, then welcome to my new little 3D happy bloggy thing!

3D on the web is still a very new thing. Even web sites that are deeply involved and engaged with 3D tend to be mostly 2D based.

The current poplar standard for 3D in your browser is WebGL. WebGL is maintained by the Khronos Group.  You will have to dig quite deeply to find some 3D there.

Have a look at webgl.com, learningwebgl.com and learningthreejs.com. These sites show you images and videos of 3D but do not actually publish 3D in there posts.

So, hey people, get with the program!

If mrdoob.com can do it all in 3D so can all of us.

And so can jaanga now. Here are some of the tips for going 3D using Three.js with Blogger:

Of course, I am using Mr.Doob's Three.js.

All the code for the spinning cube - including the load scripts - is embedded in a Blogger sidebar menu widget.

I am calling the Three.js script from the same Three.js GitHub repository that is used by the demo examples.

http://mrdoob.github.com/three.js/build/three.min.js

You can see the source code by looking at the source code for this page and searching for 'creative'.

Editing the code is too easy. When a Blogger user is logged in, a tools icon is displayed. Click the icon and an editor appears with all the source code. Make some edits, save and the web page reloads automatically. On Chrome the JavaScript console works perfectly.

Now lets look at embedding 3D in a post.



Done!

Well, OK, it kind of sucks even if it is '3D'. The box doesn't even twitch.

But that's only because I'm a newb in building multiple scenes of Three.jd in a single web page.

Just wait.

Soon there will be cool 3D-ness in every jaanga post...



1 comment:

  1. Jaanga will improve with its 3D in-lay that will eventually be similar to the HTML5 3D display and printing elements. Focus Press Website is an example site that utilizes 3D hovers. Had a hard time hard coding it.

    ReplyDelete