Learning Three.js

or WebGL for Dummies

An Extension System for three.js

This post an overview of a work-in-progress. It is about an extension system on top of three.js which mimics jQuery API. I came up with the idea while thinking about how to trim three.js and make it easier to maintain. I have always been impressed with jQuery plugin ecosystem. It is lively, varied, and contains impressive specimens. I would love to have such a rich ecosystem for three.js’s plugins.

Let’s call this experiment tQuery as in “three.js + jQuery”. It makes it easier to understand if you already known this library. This is a v0 in the “publish early, publish often” vibe. The goal of this little project is to see if we can mix to mix three.js power with jquery API usability… How far this concept can fly ? We will see.

So what do we want ? The code must make three.js easy to extend and should mimics jQuery whenever possible. In order to see if the system hold under load, i wrote several extensions already. It is very early. The architecture of it all is far from stable. Code is advancing at fast pace tho :) The screencast below is short live coding session. Just to give an idea of the current status.

DOM

With jQuery and the DOM, you get a tree of elements from the page. In fact, three.js got this tree as well. Surprising hey ? We just name it a scene instead of a tree. And our element are called Object3D. But all that is just a matter of vocabulary.

One one hand, jquery one, you got the dom and its tree of element. on the other hand, three.js one, you got the scene and its tree of object3D. Same Thing!

Chained API

jQuery got a chained API, so tQuery got a chained API. When we said copy jQuery whenever possible, we were not kidding :)

1

tQuery('.fooKlass').scale(2).translate(1,0,0);

IDs and classes

They got Ids and classes , or more recently data. So we did all the same with tQuery.

1
2
3
4

var cube   = tQuery().createCube();
cube.id("myId");   // set the id of this element
cube.addClass('fooKlass');   // add 'fooKlass' class to this cube
cube.data('goom', 'baa');

Selector

jQuery got selectors so tQuery got selectors too. Here are the selector based on geometry, they are similar to the [element selector] in jQuery, e.g. jQuery('span').

1
2
3

tQuery('sphere');    // select all objects with a sphere gemotry
tQuery('cube'); // smae with a cube gemotry
// and so on

Here are the one for classes and id. Note how the syntax is similar to css selector.

1
2

tQuery('#myId')  // to get the object with the 'myId' id
tQuery('.fooklass') // to get objects with the class 'fooklass'

obvious we got compose them like with jQuery

1
2

tQuery('.bar.foo')   // objets with the class 'bar' and 'foo'
tQuery('.bar cube') // objets with the class 'bar' with a cube as descandant

Events

Obviously jQuery got events, so we got events in tQuery. we use domEvents we saw a few week back in ‘dom events in 3D space’ post

1
2
3

tQuery('cube').on('mouseover', function(){
    console.log("somebody put the mouse over a cube");
});

A Basic Page

This is a minimal page. the code is below, the preview on the right. Quite short.

1
2
3
4
5
6
7
8
9
10

<!doctype html><title>tQuery Basic Page</title>
<script src="tquery-bundle.js"></script>
<body>
    <script>

    var world = tQuery.createWorld().fullpage().start();
    var object = tQuery.createTorus().addTo(world);

    </script>
</body>

Conclusion

This was early presentation of tQuery. I like the idea, we will see how it goes. The purpose of this experiement is to help those who know jQuery to use three.js. So they reuse jquery syntax but inside a webgl context. This is a very early project. How far is it possible to push this concept of “three.js power + jQuery API usuability”. It seems all very cute at first sight but only time will tell.

That’s all folks. More on tQuery soon. Have fun :)

Comments