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)

Pour installer en local sous linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
# ouvrir un nouveau term pour tenir compte de la nouvelle install
nvm install --lts
nvm use --lts

Pour installer sous windows

winget install CoreyButler.NVMforWindows
nvm install lts
nvm use lts

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

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.

Une fois npm run start executé, vous pouvez ouvrir la page du serveur local (indiquée dans la sortie de la commande npm, mais sûrement quelque chose comme http://localhost:8080 )

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érationnel

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 !)