Learning Three.js

or WebGL for Dummies

A Valentine Card in tQuery

The tQuery experimentation is going on. It is a lot of fun to code :) This post is just a short presentation of two plugins currently in incubation: tquery.text and tquery.shape. Yesterday was valentine day, so i thought it would be cool to stay in topic. The screencast is a live coding of a valentine card in tQuery :)

Let’s Write Text in 3D

tQuery.text plugin writes text in 3D. It is based on TextGeometry. Here is a simple example.

1
tQuery.createText("tQuery is Fun!").addTo(world);

Let’s Easily Create Shape

tQuery shape is made to easily build and extrude shapes in javascript. It is based on THREE.Shape. tquery.shape is cool because it uses a API very similar to canvas 2D path. This line will build a triangle.

1
tQuery.createShape().moveTo(0,0).lineTo(1,1).lineTo(-1,1).lineTo(0,0);

Some shapes are already available, like the triangle above, or a fish, smiley and a heart. Here is a smiley.

1
var shape = tQuery.createSmileyShape();

The valentince card

Last but not least, the valentine card! Try it out! It uses the plugins above to build an animated valentine card. It is done with less than 20lines… tQuery seems to produce short code.

Conclusion

Today we saw 2 plugins still in progress. tQuery experiment seems to go well for now. The code is moving at fast pace. I am currently experimenting with require.js to automatically resolve dependancies between plugins. What’s next ? likely a series with a step by step on how to build a tunnel game.

That’s all folks! have fun :)

Comments