TP Three.js

2023-05-10

Sujet de TP LFLEX webgl/three.js de l’Université Paul Sabatier, Toulouse 3

Maintenant que vous avez vu la version bas niveau de webgl, nous allons utiliser three.js, qui est une bibliothèque de plus haut niveau pour créer des mondes 3D en webgl.

Pré-requis

Il faut une installation de npm (node.js package manager) Le plus simple c’est d’utiliser nvm (node version manager) documentation d’installation

Pour installer en local sous linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Pour toutes autres versions et problèmes d’installation voir la doc sur la page de nvm

Bien attendre la fin de l’installation de nvm puis installer npm

nvm install --lts
nvm use 18

Doc rapide des fichiers fournis

package.json : fichier de configuration npm, defini les packages a installer, et la commande npm run start
webpack.config.js : fichier de configuration webpack, defini comment vos sources sont packé pour faire une application, et permet aussi de lancer un serveur en local.
src/index.html : votre page www, minimaliste, avec uniqument le canvas identifié par "c", qui prend toute la page.
src/index.js : votre application
npm install : install les packets
npm run start : lance un serveur local pour afficher votre applications. Les changements sur les fichiers sources recharge automatiquement la page.

Hot fix pour le live reload sous windows qui ne fonctionne pas, ajouter à webpack.config.js

  watchOptions: {
    poll: true,
    ignored: /node_modules/
  }

Merci à votre camarade d’avoir trouvé la solution ici

Travail à faire

Vous devez vous aidez de la documentation et des exemples de three.js. Vous pouvez vous servir d’autre ressources merci de les indiquer dans vos codes sources

Ajouter des lumières

Sans effet immédiat car il faut un objet avec un matériau qui réagit à la lumière, vous pourrez ajuster les paramètres des lumières une fois ces matériaux opérationel

THREE.PointLight

Modifier matériau

BasicMaterial vers StandardMaterial

THREE.MeshStandardMaterial

Ajouter d’autres objets

Parmi les objets standards de three.js vous devez construire une scene

THREE.Geometry

Animer les objets, via les transformations des objets par ex

Les transformations sont à mettre à jour dans la fonction render, en fonction du temps.

Générer un ensemble d’objets

Les objets peuvent être "attachés" à un autre objet, le mieux est via des groupes THREE.Group

ou directement en ajoutant un objet à un autre THREE.Object3D.add()

Vous devez ajouter des objets avec des positions relatives (un objet décaler par rapport à un autre, en récursif)

Ajout texture

THREE.Textures THREE.Texture

Ajouter des textures à vos matériaux, pour moduler les différents paramètres.

Vos textures doivent être accessible par votre serveur. Pour cela vous pouvez les ajouter dans un répertoire de src et demander à webpack de les copier.

Il faut installer le plugin de copie de fichier pour webpack

npm install copy-webpack-plugin --save-dev

Puis éditer le fichier webpack.config.js pour ajouter un plugin de copie, en déclarant le plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");

et en modifiant l’entrée plugins qui devient

  plugins:
  [
    new HtmlWebpackPlugin(
        {template : './src/index.html', filename : "./index.html"}),
    new CopyPlugin({patterns : [ {from : "src/assets", to : "assets"} ]})
  ]

Ainsi tous les fichiers du repertoire src/assets seront accessibles dans vos sources via ./assets

Voici quelques sites pour récupérer des textures (liste non exhaustive et non garantie, nous attendons vos retours pour affiner la liste !)