Au dernier blog, nous sommes passés en détail sur les éléments importants constituant une scène 3D. Maintenant que vous avez appris ces bases , nous pouvons établir notre environnement de travail Three.js.
Environnement
Installation et structure du projet
Chaque projet Three.js a besoin au minimum d’un fichier HTML pour définir la page web et d’un fichier JavaScript pour exécuter le code Three.js. Voici une structure typique :
my-threejs-project/
│
├── public/ # Fichiers statiques (textures, modèles 3D...)
│
├── index.html # Fichier HTML principal
│
└── main.js # Code JavaScript principal
Exemple de index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ma première app Three.js</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>
Exemple de main.js
import * as THREE from 'three';
// Votre code Three.js ici...
Option 1 : Installation avec NPM et Vite
Cette option est idéale pour les projets de taille moyenne à grande. En utilisant Node.js et un outil de build comme Vite, vous bénéficiez d’un environnement de développement optimisé.
-
Installez Node.js.
-
Dans le dossier du projet, exécutez :
npm install --save three npm install --save-dev vite -
Lancez le projet :
npx vite -
Accédez à
http://localhost:5173.
Pour le déploiement :
npx vite build
Option 2 : Import depuis un CDN
Si vous préférez éviter les installations locales, vous pouvez importer Three.js directement depuis un CDN(Content Delivery Network). Cela signifie que vous n’aurez pas besoin d’installer les fichiers localement puisqu' ils seront téléchargés dynamiquement depuis le web lorsque la page se chargera.
Ajoutez une import map dans <head> :
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@v0.149.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.149.0/examples/jsm/"
}
}
</script>
Lancez un serveur local :
npx serve .
Accédez à http://localhost:3000.
bibliothèques
Exemple d'importation :
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Et voila, votre environement est fonctionnel et vous êtes maintenant prêt à créer votre scène Three.js que nous allons explorer dans le prochain blog!
Commentaires1
Article au top
Ton article est vraiment clair et bien structuré. C,est parfait pour démarrer avec Three.js. J'ai bien aimé le fait que tu nous explique deux manière de procéder pour l'installation de l'environmment.