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/





13 comments:

  1. Replies
    1. IEEE Final Year Project centers make amazing deep learning final year projects ideas for final year students Final Year Projects for CSE to training and develop their deep learning experience and talents.

      IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation.

      corporate training in chennai corporate training in chennai

      corporate training companies in india corporate training companies in india

      corporate training companies in chennai corporate training companies in chennai

      I have read your blog its very attractive and impressive. I like it your blog. Digital Marketing Company in Chennai Project Centers in Chennai

      Delete
  2. Awesome post. Really you are shared very informative concept... Thank you for sharing. Keep on
    updating...

    indiaunimagined
    Guest posting sites

    ReplyDelete
  3. A good blog for the people who really needs information about this. Good work keep it up.

    chocolatesanddreams
    Education

    ReplyDelete
  4. This blog seems to be the best guide for its readers, where it guides them with accuracy. I could sense this writer to be courageous to make the readers understand the views in a perfect manner. Web Designing Course Training in Chennai | Web Designing Course Training in annanagar | Web Designing Course Training in omr | Web Designing Course Training in porur | Web Designing Course Training in tambaram | Web Designing Course Training in velachery

    ReplyDelete
  5. Excellent blog thanks for sharing the valuable information..it becomes easy to read and easily understand the information.
    Useful article which was very helpful. also interesting and contains good information.
    to know about python training course , use the below link.

    Python Training in chennai

    Python Course in chennai

    ReplyDelete
  6. Wonderful blog with great piece of information. Regards to your effort. Keep sharing more such blogs.
    Looking forward to learn more from you.
    Primavera Online Training | Primavera Course in Chennai

    ReplyDelete
  7. Kardinal Stick Siam - relx a great promotion. Express delivery in 3 hours.

    ufa football betting, casino, slots, lottery, direct website 1688, stable financial, 100% UFABET168.

    Online Baccarat FOXZ24 Easy to apply, fast, บาคาร่า deposit-withdraw 10 seconds with the system.

    Watch movies online sa-movie.com, watch new movies, series Netflix HD 4K ดูหนังออนไลน์, watch free movies on your mobile phone, Tablet, watch movies on the web.

    SEE4K Watch movies, watch movies, free series, load without interruption, sharp images in HD FullHD 4k, ดูหนังใหม่ all matters, all tastes, see anywhere, anytime, on mobile phones, tablets, computers.

    GangManga read manga, read manga, read manga online for free, fast loading, clear images in HD quality, อ่านการ์ตูน all titles, anywhere, anytime, on mobile, tablet, computer.

    Watch live football ผลบอลสด, watch football online, link to watch live football, watch football for free.

    ReplyDelete
  8. I am glad to discover this page. I have to thank you for the time I spent on this especially great reading.
    I really liked each part and also bookmarked you for new information on your site.
    Reactjs Training in Chennai |
    Best Reactjs Training Institute in Chennai |
    Reactjs course in Chennai |

    ReplyDelete
  9. Wow what a first rate records just greater or less global Day its intensely exceptional informative assertion. thank you for the kingdom... Windows 7 Ultimate Product Key

    ReplyDelete
  10. splendid advice going almost to your weblog, thank you for taking the epoch to portion inside the center folks. terrific perspicacity you have in this, it is nice to find a Website that information a lot intend very kind of alternating artists.... Avast Premier Latest Version Crack

    ReplyDelete
  11. thank you for taking the duration to proclamation this find the maintain for an opinion totally beneficial!.... Inspirational Sunday Morning Blessings

    ReplyDelete