Learning Three.js

or WebGL for Dummies

Simple and Efficient 3 Point Lighting to Get Your Game Started With Threex.basiclighting Game Extension for Three.js

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.basiclighting. threex.basiclighting is a threex game extension for three.js. It provides a three point lighting. It is the lighting used in movies: A key light on the front-left, a back light in the back and a fill light on the front right, nothing fancy. It is perfect if you dunno much about lighting and you want to add lights in your games. Nothing big or special in this extension. This is mainly for educational purposes or for starting your project 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!”

Easy to Use Dynamic Texture to Write Text in Your 3d Object With threex.dynamictexture Game Extensions for three.js

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.dynamictexture. threex.dynamictexture is a threex game extension for three.js. It provides an easy way to handle dynamically generated texture. Inspiration came from the excelent babylon.js which got BABYLON.DynamicTexture. It is mainly used to write text in texture. Say you got a character which says something, you may want to put that in a texture and display that above your character. threex.dynamictexture will make it easy for you.

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 Integrate Video, or Even WebCam, in Your Texture With THREEx.VideoTexture Game Extension for THREE.js

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.videotexture. threex.videotexture is a threex game extension for three.js. It provides help to handle videos in texture. It is possible to put html5 <video> output in texture with threex.videotexture.js. You can even put the webcam in a texture with threex.webcamtexture.js. It is cool if you want to make a tv screen in your game, You can easily use this extension. You pick the video to play and you are ready to go. The screen surface will use your video texture making it look like a TV set. If you need it, you can try threex.audiovideotexture.js where the video is mapped on the texture and additionnally the sound of the video is handled via web audio API. Thus you can have localized sound, which is neat in the 3d environment.

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

Beautiful Dynamic Laser Beams for Your Space Game With threex.laser Game Extension for Three.js

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.laser. threex.laser is a threex game extension for three.js. It provides a laser beam effect. Excellent to add in your space game! The laser itself is fully procedural with generated texture. The bleeding effect is obtained with additive blending. threex.laser contains a more elaborate laser which dynamically collides with your scene. It is all done for you and it looks great! On impact, there is a point light and an particle sprite for cooler effects :)

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

Realistic Physics for Your 3D Game With THREEx.Oimo Game Extension for three.js

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.oimo. threex.oimo is a threex game extension for three.js. It provides a realistic physics easy to include in your own games. So you can take objects in your game and make them fall as if it was the real world! You can code a pool game in a day! You make rocks fall from the sky in a realistic fashion! Sky is the limit! It is a warper over the excelent library oimo.js physics library. lo-th, the author does a lot of crazy things! Be sure to check it out!

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

Simple and Easy to Use Crates Models to Get Your Game Started With THREEx.Crates Game Extension for THREE.js

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.crates. threex.crates is a threex game extension for three.js. It provides crates models, 3 of them to be accurate. Yeah you heard me, this is only boxes of wood. Why doing an extension for that? Well, because crates are like a myth in 3d graphics, we put them everywhere. So if you need crates to easily put in your game, you know where to find them now :)

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

Crazy Post Processing Color Effects to Change Your Game Ambiance With Threex.coloradjust Game Extension for Three.js

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.coloradjust. threex.coloradjust is a threex game extension for three.js. It provides a color adjustement in post processing. It happens on the whole screen and changes every colors giving a whole new ambiance to your games. It includes smooth transitions between each ambiance. There are 22 ambiances going from ‘sepia’, to ‘thermal’, or ‘radioactive’. I highly recommend ‘nightvision’ if your game is about fps shooting at night! It is very flexible, you can build your own ambiance with any image editing software. It is ported from color-adjust demo by greggman. Here is a video where you can see greggman explaining the underlying technic. It explains how to do 3d texture in webgl! :)

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

One THREEx a Day Gets Your Game on Its Way! A Challenge!

Update: here is the list of All “One Threex A Day” Posts

Hello everybody! I’m working on a new project that I want to share with you. But first, let me start by telling you what inspired me to do it.

Last week, I read an interesting article written by John Resig called Write code everyday. He explains how he succeed in efficiently accomplishing his side projects. This article opened my eyes. It was like a revelation, a procedure that I just had to apply to my own work. An answer to the questions I had been asking myself: How could I be more efficient? How could I be more disciplined and improve my execution?

The tactic that Resig decided to practice to improve his productivity was quite simple: He tried working on his side projects a little everyday, for a delimited amount of time, and it worked! He didn’t feel like a failure when he didn’t do enough “quality” work during the weekend anymore! He found a way to organize his schedule, do his work, while still devoting time to leisure activities. I find this amazingly intelligent!

Have You Seen YourSelf When You Are Drunk ? - Making of a Fun WebGL Demo

This post is about a demo called “Have you seen yourself When you are Drunk ?”. What is it all about ? Well have you seen yourself when you are drunk ?

You don’t look at your best, but you don’t remember the morning after, lucky you. So now you are sober, this demo will show you how you look when you are drunk… Hopefully this will make you realize that alcohol abuse is a bad thing! And that we could save the world by stopping it!

Or it will just show some cool webgl effects… Honnestly i wasnt that sure of its exact purpose. Well, up to you to pick :) In other words, this is a webgl demo which reads your webcam, to show yourself on screen, then it does some screen deformations to give you an idea of what you look like when you are drunk.

We will learn how to code that. So first the tools of the trade…

Game Workshop: Let’s Do a Fighting Spaceship Minigame Together

In this post, we are going to present how to do a mini-game called “Flying Spaceships”. We are going to do it together in 40 minutes. You can read the slides or watch the video to follow along! Just look at this demo. It uses three.js for the 3D, WebAudio API for the sound and several threex extensions for stuff like spaceships and planets. I love the fact that now we can code mini-games in less than an hour! All that on the web, and with open source, so cool!