tQuery

three.js power + jQuery API Usability

Jerome Etienne

Who Am I

Learning Three.js

Contacts

tQuery in all that ?

tQuery Started as a Dream :)

Wishes

Would like them to be true one day...

and more preciselly ?

What is tQuery

Technical

Direction

Freeze! Show, dont tell.

Here is a Minimal Page - the SOURCE 

<!doctype html><title>Minimal tQuery Page</title>
<script src="../../build/tquery-bundle.js"></script>
<body><script>
    var world	= tQuery.createWorld().boilerplate().start();
    var object	= tQuery.createTorus().addTo(world);
</script></body>

Here is a Minimal Page - the DEMO

OK, go on now.

tQuery aims to three.js power + jQuery API usability

three.js power:

jQuery API usability

tQuery is an Extension System for three.js

Thus people can

  1. do plugins for three.js (like they do in jQuery)
  2. They share their work
  3. They build on top of each other
  4. Open Source spirit

All good in my book

What is your deal with jQuery ?

jQuery and its API usability

Always admired their plugins ecosystem

jQuery is popular

Match my goal: "Bring 3D to non-specialists"

How different is it from three.js ?

Relation with three.js

Three.js Library

What is it?

Why this library ?

tQuery and Three.js sitting in a tree

Principles

Coverage

Just another API on top of three.js

What remains the same ?

What changes ?

So you copy jQuery ?

Relation with jQuery

tQuery Mimics jQuery API

Motivation

Principles

hmm up to which point ?

Key aspects of jQuery

Dom Tree

DOM and 3D Scene: both suprisingly similar

DOM Three.js
Hierachy DOM tree scene
Element DOMElement THREE.Object3D

Chained API 

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

Well known feature jQuery

ID and Class 

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');

CSS-like Selector

for classes and id as we just saw in previous slide

Selector based on geometry, similar to a jQuery('span')

tQuery('sphere');   // select all objects with a sphere gemotry
tQuery('cube');     // same with a cube gemotry

CSS-like Selector

can compose them like with jQuery

tQuery('.bar.foo')  // objects with class 'bar' and 'foo'
tQuery('.bar cube') // objects with class 'bar' and cube descandants

Dom Events 

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

Supported Events

ok so it is for real.

Mimicing jQuery API for fun and profit

Taken very seriously!!

jQuery API is authoritative!

Bla bla bla ... all talk. Show something!

Here is a mini-game

click here

Ok not bad, what about the code?

Build the tube's walls 

// HINT: a tunnel is a cylinder seen from inside.
// Once you realized that, most of the work is done.

// create the object
var tube = tQuery.createCylinder();

// now lets turn it inside out - flip the geometry
tube.geometry().flip();

Advancing into the tube 

tubeTexture.material().textureScrolling({
    // transform the texture on render
    transform	: function(tTexture){
        // to go forward
        tTexture.offset.y	+= 0.2;
        // make it loop
        tTexture.offset.y	%= 1;
    }
});

Making the tube wavy 

tube.geometry().vertexAnimation({
    // transform vertices on render
    transform	: function(origin, vector, present){
        // compute displacement
        var deltaX = Math.cos(present*0.4);
        var deltaY = Math.sin(present*0.4);
	// apply displacement
        vector.x = origin.x + deltaX;
        vector.y = origin.y + deltaY;
    }
});

Move the player 

// Move player left/right
var playerAngle	= 0;
var keyboard	= tQuery.keyboard();
// hook the rendering loop
world.loop().hook(function(){
	// check the keyboard
	if( keyboard.pressed('right') )	playerAngle += 0.01;
	if( keyboard.pressed('left') )	playerAngle -= 0.01;
});

hmm tQuery is about extension ?
Show some!

tQuery.text

Display Text in 3D

Playground examples

Plugins layground examples

tQuery.Shapes

Build 3D shape with canvas-like path

Playground examples: expanded version short version

Plugins examples

shape+text: Valentine card

tQuery.csg

Constructive Shape Geometry

Able to add/substract/join objects to build new ones

Plugins examples

tQuery.domevents

Emulation of DOM event in 3D space

Plugins examples

Playground example

tQuery.fireball

Pure Shader Material

Plugins examples

tQuery.md2character

Animate doom character without breaking a sweat

Plugins examples

Play in javascript console

character.setSkin(2);		// to change the skin (5 of them)
character.setWeapons(4);	// to change the weapons (11 of them)
// some randomness
setTimeout(function(){
    character.setSkin(Math.floor(Math.random()*5 % 5));
    character.setWeapon(Math.floor(Math.random()*11 % 11));
}, 1000);

Just a few plugins in tQuery

Anything else ?

Conclusion

three.js power + jQuery API Usability

The Code

That's all folks.

Question ?

Jerome Etienne