Introduction à Three.js

Objectif : initiation à Three.js, en transposant le système solaire modélisé en OpenGL au premier TP.

Préparation

Recopier le fichier solar_system.html et le commenter, identifier les différentes étapes nécessaire à la visualisation de la scène dans une page web.

Réalisation

• créer une scène (cf. Scene),
• ajouter une caméra virtuelle (cf. PerspectiveCamera) dans la scène (qui, étant un Object3D, permet d'ajouter d'autres objets à celle-ci) et préciser sa position,
• définir et ajouter une lumière ponctuelle (cf. PointLight) et/ou une lumière ambiante (cf. AmbientLight),
• définir un point (cf. Object3D) qui va servir de point de référence aux corps célestes constituant le système solaire, et l'ajouter à la scène,
• définir les planètes par rapport à ce point de référence, cette définition nécessite plusieurs étapes :
  1. définir un chargeur de texture (cf. TextureLoader) en réutilisant les images du premier TP d'OpenGL (sauf éventuellement pour le soleil),
  2. dans la fonction en ligne associée (voir l'extrait de code ci-dessous), définir une sphère (cf. SphereGeometry), ses propriétés surfaciques (cf. MeshLambertMaterial) ainsi qu'un maillage associé (cf. Mesh),
  3. préciser sa position,
  4. ajouter cet objet au point de référence.

// EARTH
var loader = new THREE.TextureLoader();
loader.load('earth.jpg', function(texture) {
...
});

• choisir le renderer WebGL (cf. WebGLRenderer) pour afficher la scène,
• spécifier le type d'interaction (la classe OrbitControls est particulièrement adaptée au contexte, elle fait partie des contrôles présents dans le sous-répertoire controls du répertoire des exemples de Three.js),
• ajouter un listener pour gérer l'évènement resize.

Le code doit comporter la définition de la fonction animate() ainsi que d'une fonction render(). Cette dernière doit mettre à jour les variables qui conditionnent les transformations géométriques (via les méthodes de la classe THREE.Clock pour une animation) et faire appel au renderer.

// ANIMATION
function animate() {

requestAnimationFrame(animate);

render();
controls.update();

}

// RENDERING
function render() {

...
renderer.render(scene, camera);

}

Utiliser le temps restant pour améliorer la modélisation du système solaire et le rendu de la scène (le site threejs.org regorge d'exemples plus ou moins sophistiqués).