Three.js : Introduction

What is Three.js ?

Three.js is a JavaScript library created by Ricardo Cabello in 2010. Nowadays, many contributors help daily to develop it on Github.

The Three.js library is often confused with WebGL ! WebGL is a “low-level” technology used to manipulate elementary 3D components such as points, lines and triangles.

Three.js uses WebGL and facilitates its integration by providing the ability to more easily manipulate complex 3D objects, lighting, shadows, and any complex element of a 3D world.

Thus, this powerful library allows to include scenes and 3D elements in web pages, thanks to the WebGL technology.

WebGL technology allows you to create amazing and interactive experiences, compatible with most modern browsers !

The “Starter Pack”

What do we need to get started with Three.js ?

• A modern web navigator
• A basic web code environment
• Basic knowledge of JavaScript
• A mind full of project ideas

If you have these elements in the bag, we can begin !

Hello world

In your favorite code editor, let’s create three files :

• index.html
• script.js
• style.css

We will create a base environment to use Three.js.

See the Pen Hello World by Thomas (@thomassifferlen) on CodePen.

This code is complex at first glance, but that’s just an impression !

Let’s study in detail, each part of the code in the first tutorial :

Chapter 1 – The Basic Concepts of Three.JS