Informatique Graphique

Prise en main de Three.js

Guillaume Gilet

Première étape : éditer l'html

  • La documentation de Three.js
  • Un navigateur (Firefox ou Chrome)
  • Un éditeur de code local

Pour débuter

  • Une page Web template a télécharger (ici)
  • Ajouter une caméra perspective
  • Ajouter un objet simple (sphère,cube,torus), avec un matériau basique (MeshBasicMaterial)
  • Effectuer le rendu de la scène (remplir la fonction render)
  • Les détails sont dans le cours

Histoire de caméra

  • Modifier les paramètres intrinsèques (fov) et extrinsèques (position, rotation) de la caméra et observer le résultat
  • Il est important d'être à l'aise avec le modèle caméra et ses différents paramètres
  • Essayer de définir l'orientation de la caméra grâce à la fonction lookAt

Matériaux

  • Les matériaux représentent un modèle d'approximation de la fonction de BRDF qui définit l'interaction lumière matériaux
  • A quelle approximation correspond le matériau MeshBasicMaterial ?
  • Changer le matériau de la sphère en un matériau de Lambert (MeshLambertMaterial)
  • Ajouter une lumière ponctuelle (PointLight)de couleur blanche
  • Que peut-on constaster sur le modèle d'illumination ?

Illumination

  • Faites varier les paramètres de couleur de la lumière et de couleur diffuse du matériau et constater les résultats
  • Essayer maintenant d'ajouter une lumière de type ambiant (AmbiantLight) dans la scène. Quelle est son influence ?
  • Expérimenter avec l'eclairage et les matériaux en ajoutant plusieurs lumières de couleur et nature différentes et en faisant varier la couleur et la nature du materiau

Histoire de caméra (bis)

  • Il existe plusieurs méthode pour contrôler la caméra avec la souris
    • Télécharger le script Orbitcontrol)
    • Déclarer ces scripts dans l'en tête de votre fichier afin de pouvoir les utiliser
    • Instancier une variable correspondant a l'objet OrbitControl
    • Afin de pouvoir interagir avec la scène, il faut appeler la fonction render régulièrement
    • Pour cela, déclarer une fonction animate qui affichera la scène à intervalle régulier (cf cours)

Animation

  • Faites varier le paramètre rotation de votre objet en fonction du temps
  • Faites varier le paramètre position de votre objet en fonction du temps
  • Essayer de faire varier les paramètres du matériau (la couleur par exemple) en fonction du temps
  • Essayer de le même manière d'animer la position de la lumière

Repère de scène

  • Beaucoup d'objets sont définis en fonction d'un autre repère 3D
  • Cela crée une définition hierarchique
  • Créer un objet AxisHelper et l'ajouter à la scène
    • Cela matérialise le repère 3D de la scène

Hierarchie d'objet

  • A partir d'une scène vide créer un objet3D (appelons le A) et ajouter à cet objet un objet AxisHelper et un objet Cube
  • Que ce passe-t-il maintenant lorsqu'on déplace/fait tourner/redimensionne A ? lorsqu'on déplace/fait tourner/redimensionne le cube ?
  • Ce mécanisme permet de définir facilement des hierarchies d'objets
  • Chaque object est défini dans le repère de son ancetre

Une scène avec plusieurs repères mobiles

  • Un plan à placer horizontalement pour définir le sol
  • Un objet en rotation sur lui même dont la position décrit un cercle au dessus de ce plan
  • Un objet en rotation sur lui même dont la position décrit une orbite autour de l'objet précédent
  • Pour les plus courageux, essayer d'accrocher la caméra à un des objets de la scène

Question d'interface

  • Il est souvent utile d'avoir une interface afin de modifier directement les paramètres de votre scène
  • Afin de simplifier, nous utiliserons le script dat.GUI (a inclure dans votre fichier)
  • La documentation est ici
  • Essayez (après avoir lu la documentation) de réaliser une interface permettant de changer
    • La position et l'orientation de votre objet
    • La position et la couleur de la lumière
    • Le matériau et la couleur de votre objet

Pour aller plus loin

Il existe un grand nombre d'exemples, de démos utilisant WebGL, il est possible pour chacune de regarder le code source afin de mieux comprendre les mécanisme des divers effets (par exemple Exemple - WebGL Water).

A vous de chercher, de comprendre et de progresser

A rendre pour ce TP

  • Un objet principal en rotation au dessus d'un plan
  • Avec un modèle d'illumination standard
  • En rotation lente sur lui même
  • Des objets plus petits en rotation autour du premier
  • Des lumières attachées à chaque petit objet
  • Une caméra interactive (orbit)
  • Une interface DAT.GUI permettant d'arreter la rotation de l'objet principal