Learning Three.js

or WebGL for Dummies

One Threex a Day Challenge: Phase 1 Completed!

Hello everybody!

It’s been nearly a month since I started publishing “One threex a day” challenge. The idea was to share with you the many three.js games extensions that I had written over time. I wanted to show you how they could be useful, fun and easy to include in your very own three.js game. I came up with a motto “One threex a day gets your game on its way”. I was all set up and ready to go. This was a challenge inspired by John Resig’s article called “Write code everyday”. I deeply agree with his theory for making progress, increasing productivity and getting the work done. I wished to try something similar on myself.

Let me tell you though… it WAS challenging! Keeping the publication rhythm was hard. It takes a lot of discipline and organization to get it done everyday. I had the best intentions, but unfortunately I got sick and I felt bad for most of last week. Additionally I had some day work on the side that I needed to get done. At this rate of publication, it was very hard to keep up! At first I wanted to publish the threex extensions for a period of two months but I think it is best to rest for a while. So a week ago I published the last three.js game extension of phase 1.

Personalized and Polished Text for Your Three.js Game With threex.text

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.text. threex.text is a threex game extension for three.js which makes it easy to add 3d text in your game. You can use it to create a big logo on top of a shop or a big sign of any kind Las Vegas style. Up to you to see :) It is very flexible. You can fine tune lots of parameters to make it fit your needs. You can choose the fonts, the size, the bevel, the weight etc…

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Perlin Terrain Procedural Generation for Your Game With threex.terrain

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.terrain. threex.terrain is a three.js games extension which provides a procedural terrain generated from a simplex noise, the Perlin noise. As you can see you have different zones that make the terrain more varied, the blue zone represents water, the green one represents trees or grass and the white zone at the mountain top is snow. Imagine your video game character walking on these 3D mountains or flying over them, pretty cool eh? You can take him through river, forest, wind and snow if you want ;)

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Procedural Generated Pool Balls for Your Three.js Pool Game With threex.poolball

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.poolball. threex.poolball is a three.js games extension which helps you build pool balls. It provides dynamically generated models of pool balls, so no model download needed. It may be fun to play with when you start with three.js, funnier than a plain sphere for sure :) You can use it for your bar games, having your characters bet when playing pool, or even your Marble Table games, as I did, adding cool granular sounds when the balls roll.

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Easy Way to Include Transparency in Your Three.js Game With threex.transparency

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.transparency. threex.transparency is a three.js games extension to easily handle transparency. Transparency is a tricky business in Webgl, but this extension makes it approachable. It is worth trying. Do you remember the transparency between the leaves of a tree in 3D games? Well, with this extension you will be able to add it to your own game. You can also make clouds appear transparent in the sky you have created for your game. It is easy to include and it gives a nice polish finish, a professional touch.

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Live Cube Maps Reflections in Your Three.js Game With threex.cubecamera

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.cubecamera. threex.cubecamera is a three.js games extension which provides a helper for cube cameras. It is very useful when a given object must reflect a texture cube live. Just look at it, you can see the reflection as clear as a real life mirror! You can give your texture the color you want, for example in the demo I created a “gold” sphere to give it a shinier look. Be careful though, this requires 6 renderings of the scene every time you update it. It becomes expensive fast.

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Classical Suzanne Monkey From Blender to Get Your Game Started With threex.suzanne

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.suzanne. Suzanne is a classic. She is the blender famous model familiar to all blender users. It is also a three.js games extension extension which provides you with a monkey model. Blender wanted to create a less common test model, so Suzanne was born. She is more precisely a 3D model of a chimpanzee head. It is pretty basic but you can easily add it as a funky animal character and install it in your platform games!

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Funky Deformation for the Geometry of Your Three.js Game With threex.vertexanimation

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.vertexanimation. threex.vertexanimation is a three.js games extension which provides easy vertex animation. You can see your object move as if it’s got a life of its own! You can use it to make the objects in your game bounce, dance or move in funky ways. You can add it in your games to get a Flubber effect. The best part about it is that you can get creative. You can morph or deform your objects to transform them into other objects. It is really fun to experiment with!

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Three.js Interview: Online 3D Modeling and Rendering With Clara.io

Hello everybody! This is my first Three.js Interview video. The inspiration came from all those great people out there doing very cool projects with three.js. I want to share their innovations with others. If you know me, you know that I love talking about three.js. So, I would like everybody to have the opportunity to enjoy and learn from these three.js interviews. So three.js interviews are videos of around one hour where people are talking about cool things they do with three.js . Maybe you could get some ideas for your own project or simply partake on a subject you’re passionate about.

The idea is to have interesting people come and talk about cool things that they’ve done with three.js. Like Ben Houston, who is our guest in this first video. Ben is the Team Leader for Clara.io, a online 3D modeling and rendering tool that you can use inside you browser. Ben talks to us about the creation and the evolution of Clara.io and about all the interesting features it’s got!

I hope you enjoy it and stay tuned for the next Three.js Interview :)

Scary Monster for Your Next FPS Game in Three.js With threex.md2character

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.md2character. threex.md2character is a three.js game extension which provides a model of a monster. His name is ‘ratmahatta’ and is from quake era. It is animated, can hold a weapon, skin may be changed. Pretty sweet. you got 12 weapons to choose from, 5 different skins and 16 distinct animations. Pretty complete! It is easy to include in your game, maybe in a cave or a dungeon :) It is from webgl_morphtargets_md2.html three.js example. The model is make by Brian Collins and converted by @oosmoxiecode’s MD2 converter.

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”