WebGL let us create rich interactive experiences in a lot of devices and browsers.

Soporte actual de WebGL

What do you need?

An up to date browser (I prefer to use Google Chrome).

Basic knowledge of Javascript (maybe this helps you).

Be willing to have fun

Basic Boilerplate

Well it’s time to start, take a deep breath and open your favorite editor. We’ll create two files (for better readability).

index.html (here we import Three.js from a CDN).

(here we import Three.js from a CDN). script.js (here goes our code).

That looks like a lot of code, but it isn’t, let’s analyze it part by part. If everything is fine you should see this:

To be honest, that’s not a very exciting example, but we will spice it up in a moment, let’s analyze what is happening behind.

WebGlRenderer, Scene and Camera

This is the first common pattern we are going to see in every Three.js app.

Create a Renderer. Create a Scene. Create a Camera.

The renderer is the place where we are going to put the result of our scene. In Three.js we can have multiple scenes and each one can have different objects.