Software

Introduction

To render amazing 3D scenes, nowadays no more plugins or additional installations are required. The most widespread Browsers like Chrome, Firefox, Safari, Opera and Internet Explorer support WebGL, the hardware accelerated OpenGL for browser.
Learning pure WebGL from scratch is hard. So, why don't use a library which wraps WebGL and is easy to use? Three.js is what you are searching for. It provides a lot of awesome examples, but no guided tutorials.
On this page I used the famous NeHe OpenGL tutorials and started implementing them with Three.js. I try to port as many of the tutorials, so stay tuned ...
If you have any questions or suggestions, please feel free to contact me.
 
Note:
The following examples use release 69 of Three.js.
If you find these tutorials usefull, please support them by a PayPal donation or a Flattr.

Flattr this
 
Tutorial 01: Basics
Tutorial 01: Basics
The first lesson introduces WebGL, the browsers which support it and the wrapper library Three.js.
Tutorial 02: Your first polygon
Tutorial 02: Your first polygon
This lesson will teach you how to create triangles and squares. It also highlights the basic usage of Three.js.
Tutorial 03: Adding color
Tutorial 03: Adding color
Tutorial 02 will be extended by applying flat and smooth coloring to the triangle and the square.
Tutorial 04: Rotation
Tutorial 04: Rotation
The colored polygons of lesson 03 will be rotated around the x- and y-axis.
 
Tutorial 05: 3D shapes
Tutorial 05: 3D shapes
Now the 2D triangle is replaced by a 3D pyramid and the 2D square by a 3D cube.
 
Tutorial 06: Texture mapping
Tutorial 06: Texture mapping
This tutorial shows how to map a texture onto a cube.
 
 
Tutorial 07: Texture filtering, lightning and keyboard
Tutorial 07: Texture filtering, lighting and keyboard
Now it's time to test the texture filtering, integrate lights and process keyboard inputs.
Tutorial 08: Blending
Tutorial 08: Blending
Tutorial 8 covers blending (transparent materials).
 
 
Tutorial 09: Moving bitmaps in 3D space
Tutorial 09: Moving bitmaps in 3D space
Tutorial 9 covers bitmap moving in 3D space.
by Ric Wright, www.geofx.com
Tutorial 10: Loading and moving through a 3D world
Tutorial 10: Loading and moving through a 3D world
Tutorial 10 covers 3D worlds.
 
 
Tutorial 11: Flag effect (waving texture)
Tutorial 11: Flag effect (waving texture)
Tutorial 11 covers a textured waving flag.
by Ric Wright, www.geofx.com

 
 
 
 
Tutorial 13: Bitmap fonts
Tutorial 13: Bitmap fonts
Tutorial 13 covers bitmap fonts.
by Ric Wright, www.geofx.com
 
 
Tutorial 14: Outline fonts
Tutorial 14: Outline fonts
Tutorial 14 covers outline fonts.
by Ric Wright, www.geofx.com
 
 
Tutorial 15: Texture Mapped Outline Fonts
Tutorial 15: Texture Mapped Outline Fonts
By Ric Wright, www.geofx.com