1. Installer ThreeJS et afficher une scène

Installer la librairie

Après avoir démarré un projet, installer ThreeJS avec NPM :

npm install three

Importer la librairie

Importer ensuite la librairie dans main.js :

import * as THREE from "three";

Créer un contenant pour la 3D

Créer un élément qui contiendra notre 3D dans une page HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>eikon parcel starter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="scss/main.scss" />
  </head>
  <body>
    **<div class="element"></div>**

    <script src="js/main.js" type="module"></script>
  </body>
</html>

Et lui donner une taille en CSS :

.element {
	width: 800px;
	height: 600px;
}

Créer des variables de notre contenant

Puis sélectionner l’élément qui contiendra la 3D, et faire des variables contenant sa largeur et sa hauteur :

var element = document.querySelector(".element");
var width = element.clientWidth;
var height = element.clientHeight;

Créer une scène

Une scène est l'espace 3D où tous les objets seront placés. Pensez-y comme à un "contenant" pour votre monde 3D.