Learn Three.js, 4° édition (en anglais, three.module.min.r147 = 2022-11-30), disponible sur Amazon Kindle pour 20 €

Code des exemples (mis à jour)

L'installation et l'utilisation de ces exemples requiert l'installation de git, node et npm. Pour vérifier s'ils sont déjà installés => taper dans le terminal :
git --version, puis node --version et enfin npm --version. S'ils ne le sont pas, téléchargez-les : git (version 2.43, novembre 2023), node et npm (version 20, janvier 2024)

Après avoir créé un dossier (sur le disque dur et, nommé, par exemple, Three, y ouvrir le terminal et taper :
git clone https://github.com/PacktPublishing/Learn-Three.js-Fourth-edition

S'affiche :

Cloning into 'Learn-Three.js-Fourth-edition'...
remote: Enumerating objects: 899, done.
remote: Counting objects: 100% (45/45), done.
remote: Compressing objects: 100% (33/33), done.
Receiving objects: 100% (899/899), 548.94 MiB | 7.82 MiB/s, done.
remote: Total 899 (delta 18), reused 34 (delta 12), pack-reused 854
Resolving deltas: 100% (148/148), done.
Updating files: 100% (719/719), done.

Ce clonage dure +/- une minute (1'16") et crée (dans le dossier créé) le dossier Learn-Three.js-Fourth-edition dont le contenu pèse +/- 1.26 Go.

Ce dossier Learn-Three.js-Fourth-edition est renommé en LearnThree4.

Recommandation. Désinstaller NodeJS, via la procédure de désinstallation classique. (Sous Windows, Démarrer > Paramètres > Applications > Applications installées.

Puis, installer node + npm (sans cocher les installations complémentaires (notamment Python))

Puis, taper : npm install.

Ceci créera (dans le dossier créé) un second dossier node_modules dont le contenu pèse +/- 45 Mo.

Dans le dossier LearnThree4/source se trouvent deux fichiers .json (nécessaires à ce qui suit).

Dans le terminal situé, dans ce dossier LearnThree4/source, taper :
npm install.

Ce qui affichera (dans la série de message), une ligne semblable à :
added 579 packages, and audited 580 packages in 19s

Et, créera un second dossier node_modules dont le contenu pèse 88 Mo. Cfr note46.txt

Puis, dans le terminal situé, dans ce dossier LearnThree4/source, taper :
npm run build.

Ce qui affichera (dans la série de message), une première ligne semblable à :
> ltjs-fourth@1.0.0 build.

Et, créera le dossier dist dont le contenu pèse +/- 23 Mo. Cfr note46.txt

Ces deux commandes, npm install et npm run build ne doivent être exécutées qu'une seule fois.

Pour visualiser les exemples du livre, dans ce dossier LearnThree4/source, taper :
npm run serve, pour lancer un mini-serveur web et ouvrir automatiquement le navigateur web par défaut.

Pour fermer ce serveur => taper (deux fois) CTRL+C (dans le terminal).
Après le premier CTRL+C, s'affiche :

<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...
Terminer le programme de commandes (O/N) ?

Une fois ce serveur lancé, l'avantage est que dès qu'une modification est enregistrée dans un éditeur (tel que VSC), elle est répercutée dans le navigateur. L'idéal serait de travailler avec deux écrans : un pour le code, l'autre pour le navigateur.

Pour visualiser les exemples du livre, dans ce dossier LearnThree4/source, on peut aussi taper :
py -m http.server, pour lancer un mini-serveur web. Toutefois, dans ce cas, le navigateur web (par défaut) n'est pas lancé automatiquement.

Visual Studio Code

VSC est recommandé pour le codage en Javascript.

Après avoir téléchargé et installé VSC, on peut ouvrir un dossier. Le bon dossier à ouvrir est LearnThree4/source car il contient le dossier /dist (qui contient tous les exemples du livre, rangés par dossier) et le dossier /node_modules qui contient tous les fichiers JS appelés par ces exemples.

Avant de modifier le code des exemples, le dossier /dist est copié sous le nom /distCopie. Ce dossier, ses sous dossiers et tous les fichiers sont mis en lecture.

Seuls les fichiers sous le dossier /dist seront modifiés, pour tester les exemples.

On peut faire confiance à l'auteur de ce dossier (cocher Trust the authors ...)

Afin que le code de ces exemples soit mieux formatés (que les lignes de code ne soient pas trop longues), une extension de VSC a été installée.

Une autre extension peut être installée Live Server afin de disposer d'un mini-serveur web, intégré à VSC, et qui écoutera, par défaut, sur le port 5500.

Dans la barre d'état de VSC, à droite, s'affichera alors :

Il est possible de disposer de trois mini-serveurs web locaux et donc d'ouvrir 3 navigateurs différents, via des ports sous Python (par défaut 8000, python -m http.server 8000), via Node (par défaut 8080, npm run serve) et via VSC (http://127.0.0.1:5500/, clic sur "Go Live")