Three.js : Introduction

Qu’est-ce que Three.js ?

Three.js est une librairie JavaScript créée par Ricardo Cabello en 2010. De nos jours, de nombreux contributeurs aident quotidiennement à son développement sur Github.

La librairie Three.js est souvent confondue avec WebGL ! WebGL est une technologie techniquement “bas-niveau” utilisée pour manipuler des composants 3D élémentaires tels que des points, lignes et triangles.

Three.js utilise WebGL et facilite son intégration en offrant la possibilité de manipuler plus facilement des objets 3D complexes, éclairages, ombres, et tout élément complexe d’un monde 3D.

Ainsi, cette puissante librairie permet d’inclure des scènes et éléments 3D dans des pages web, grâce a la technologie WebGL.

La technologie WebGL permet de créer des expériences surprenantes et interactives, compatibles avec la plupart des navigateurs modernes !

Le « Starter Pack »

De quoi avons nous besoin pour débuter avec Three.js ?

• Un navigateur web moderne
• Un environnement de code web de base
• Des notions de base en JavaScript
• Des idées et projets plein la tête

Si vous avez ces éléments dans votre sac à dos, nous pouvons commencer !

Hello World

Dans votre éditeur de code préféré, créons trois fichiers :

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

Nous allons créer un environnement de base pour utiliser Three.js.

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

Ce code est à première vue complexe, mais ce n’est qu’une impression !

Étudions en détail, chaque partie du code dans le premier tutoriel :

Chapitre 1 – Les concepts de base de Three.JS