tQuery API

three.js power + jQuery API Usability

Jerome Etienne

Who Am I

Learning Three.js

Contacts

What is tQuery API ?

tQuery API in a few word

Thin layer on top of three.js

Dumb library

tQuery API Started as a itch to scratch



Itch: Bring 3D to non specialists


Working hard to make it true !! :)

Freeze! Show, dont tell.

Flying to the moon Demo - 10h of code - Demo

 

Minecraft visits Mount Olympus - 6h of code - Demo

 

a Sport Car - 40 lines of js - Demo

 

a minecraft guy - 20 lines of js - Demo

 

head tracking - 20 lines of js - Demo

 

light saber - 30 lines of js - Demo

 

Realistic physics - 80 lines of js - Demo

 

a 3D Pong - 100 lines of js - Demo

 

Multiplayer Minecraft Chat - 1-day workshop - Demo

 

Not bad ... Why the code is so short ?

Why the code is so short ?

Mimicking jQuery API makes code shorter

Plugins makes code shorter

Short code is a by product of tQuery principles

Wanna try ?

Live editor to the rescue

Coolness

Examples cuteness

Show us the code.

Here is a Minimal Page - playground 

<!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>

Fun Facts

Here is a Minimal Page - Demo

What is the recipe of tQuery ?

tQuery aims to three.js power + jQuery API usability

three.js power:

jQuery API usability

Relation with three.js

Three.js Library

What is it?

Why this library ?

Just another API on top of three.js

What remains the same ?

What changes ?

Relation with jQuery

tQuery Mimics jQuery API

Motivation

Principles

Key aspects of jQuery - All Present in tQuery too!

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

ID and Class 

var cube    = tQuery().createCube();
// set the id of this element
cube.id("myId");
// add 'fooKlass' class to this cube
cube.addClass('fooKlass');
// set data attribute
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

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

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

Dom Events - Demo

 

a sound visualisation - 40 lines of js - Demo

 

Play with Doom Character - 50 lines of js - Demo

 

What about a game ?

Here is a mini-game - Demo

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!

Examples Plugins

tQuery.text: Display Text in 3D - example

tQuery.Shapes: Build 3D shape with canvas-like path - example - Valentine card

tQuery.csg: add/sub objects - example

tQuery.domevents: Emulation of DOM event in 3D space - example

More Examples Plugins

tQuery.fireball: pure shader material - example

tQuery.md2Character: Animate doom character - example - can play in console too. 

character.setSkin(2);	// to change the skin (5 of them)
character.setWeapon(4);	// to change the weapons (11 of them)
// some randomness
setInterval(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 ?

@JeromeEtienne