Friday, May 31, 2013

Three.js and jQuery: Never the Twain Need Meet




The phrase "never the twain shall meet" was used by Rudyard Kipling, in his Barrack-room ballads, 1892:
"Oh, East is East, and West is West, and never the twain shall meet."
I use this as my lesson-learned from playing with Three.js and jQuery. In this post I will suggest keeping the two different libraries in quite separate places and writing in two styles.

And, actually, I am quite wrong. Jerome Etienne at learningthreejs.com is doing an amazing job of building a combined dialect which he has named tQuery. And for proof, just look at the hugely complex structures that Steve Wittens is building using tQuery.

But now let us consider the wrong way.

Three.js says it is 'a lightweight 3D library with a very low level of complexity — in other words, for dummies.'

jQuery says it 'makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler'.

Guess what? What is easy 4 1 is not necessarily easy 4 2 let alone 4 U.

The two libraries appear to come from two different planets.
  • Three.js is JavaScript kindergarten coding. If you can do IF's and FORs you can do THREE.JS
  • jQuery is a JavaScript takeout menu. If you can order two from Column A and three from Column 4 and you are good to go on jQuery.
Which library is from Mars and which one is from Venus? Who knows?

Anyway, the thing is that both are libraries are extremely popular in their niches. And it is highly likely that people (like me for example) want to combine the user experience of jQuery with the 3D of Three.js.

The question is: can one easily combine the two styles?

The normal thing is to say, I am writing a program. My program should have a style and to make life easier for the maintainer, my program should have a consistent style throughout.

So then which style should you follow? Mr Doob's or John Ressig's?

Each giant is so huge that this midget can't seem to stand on both their shoulders at the same time.

And yet we need to write apps that are 3D and have calendars, that are animated but can show text in an accordion. What can small people do?

So here is another quote, this time from Saint Augustine:
Cum Romanum venio, ieiuno Sabbato; cum hic sum, non ieiuno: sic etiam tu, ad quam forte ecclesiam veneris, eius morem serva, si cuiquam non vis esse scandalum nec quemquam tibi.
Basically this Latin translates as: "When in Rome do as the Romans do."

The links to the cookbook samples will allow you to be completely schizophrenic while maintaining total sanity throughout while playing with both libraries together

Here are some guidelines.

We like Google, Bling, Alpha. The more words we show in straight HTML the more they will like us.

JavaScript and torus knots are not really SEO-able.

So keep let's keep two separate files. The HTML and jQuery goes in the main HTML file. The Three.js goes into its own file called in by an IFRAME into the main page. In the main file, you write in jQuery style. In the iframe, you write in Three.js style.

So the final page is built from two completely different files. And both pages - if well-written - should display all by themselves.

But 'Wait, wait!" you say. "The jQuery and the Three.js need to communicate."

Here is the secret sauce.

Both libraries will accept communication from the other if you wash your hands that communication is sanitized.

When Three.js needs something from upstairs, it just prefixes the jQuery variable name with 'parent.$.'

When jQuery need something from downstairs it prefixes the Three.js variable name in this sort of manner:

$("#ifr")[0].contentWindow.scene.children[0].material.wireframeLinewidth.toFixed(1)

The magic word is '.contentWindow.'

Both of these 'handshakes' work with getting and setting in the alternative environment.

So what are you waiting for?

Welcome to my happy, easy jQThreery schizophrenia!

Link:
http://jaanga.github.io/cookbook/j3qUE/r1/