Learning Three.js

or WebGL for Dummies

LearningThree.js News: Stay Tuned With Creative 3D Demos

This post is about Three.js News, a fun and brief newsletter about demos in three.js. The idea is to present the new and interesting 3D creations on the web. Our goal is to keep the audience up to date and tuned with Three.js most recent developments. We will upload videos and collect information of the latest demos. Let’s take a look at this episode

See-through Effect for Augmented Reality on Your Phone

This post shows how to read your phone camera and make it appears as transparent, aka to act as a see-through. It may seems unrelated to 3d at first but it is extremely useful in augmented reality. I know it may seem silly :) But this see-throught is the base of Augmented Reality in a phone. This and other AR tech will be the subject of future posts.

It makes your device ‘appears as transparent’ So when the user is looking at her device, she is seeing the reality. You just have to display your augmented part on top and you got augmented reality. A Picture is Worth a Thousand Words :)

Three.js Online Meeting With JoclyGames

Hello everybody.

This is a new Three.js Online Meeting post. The idea is to interview people using Three.js in their projects. I think it is a great way to learn from each other and share our experiences. You know me, I love three.js and I love talking about it. In this video of about 1 hour you are gonna see some interesting people really passionate about games and three.js

For this interview, i talked with Jérôme CHOAIN and Michel Gutierrez , the guys behind Jocly Games. They have over 113 web board games with very cool features as you will see. You can play on and off line with your friends, or just you and your computer. They also have some mobile apps that make their games even more accessible. You can dowload their games from Facebook, Google Play and iTunes. And good news for developers: you can create and embed your own games! It is tons of fun. Be sure to check it out.

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