MBDS ESTIA 2021-2022

Introduction

Je vous propose de pratiquer le langage JavaScript à travers l'apprentissage de la 3d au travers de la librairie BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs.

Outils utilisés

• La librairie BabylonJS 
• Visual Studio Code un puissant éditeur de code source gratuit,
• Git pour la gestion de versions, pour récupérer les exemples du cours, pour rendre votre projet à la fin etc.

 Séance 1 : introduction à JavaScript, structure d'un projet, etc.

Supports de cours

• Mooc "Introduction à JavaScript"
   
• Slides BabylonJS (de 1 à 18)
  
  
• Video from this course (9h-12h)
  • Partie 1 (intro à JavaScript) : https://youtu.be/2yP_OD2sN-0 
  • Partie 2 (intro à BabylonJS, bases, materials, éclairages etc.) : https://youtu.be/wNFh0PGoB2s
     
• Compléments en français
  • Détails sur les couleurs, lumières, matérials 
  • Rappels sur les transformations géométriques 2D et 3D 

•  Github repository du cours que l'on utilisera dans toutes les séances

Exemples fait en live coding:

• Eléments de base JavaScript : https://jsbin.com/visivuk/edit?js,console,output
• Petit exemple de gestion d'un click : https://jsbin.com/laleyon/edit?html,js,console,output
• Pour le reste, voir le MOOC, ou bien chercher "MDN array", "MDN classes", "MDN object basics", "MDN events", "MDN DOM" etc.
  
   
• Exemple canvas 2D : https://jsbin.com/lijecet/edit?html,css,js,output

Séance 2 : on va plus loin avec Babylon (terrains/height maps, contrôler un objet, gravité, collisions, mesh avec squelette et animations, cloner des meshs)

Support de cours :

• Slides BabylonJS (de 19 à la fin)
  
  
• Github repository du cours que l'on utilisera dans toutes les séances
   
• Vidéos du cours (14h-18h)
  • Partie 1 (follow caméra, déplacer un objet avec le clavier, front-vector etc.) : https://youtu.be/twwrhDx0X10 
  • Partie 2 : charger un modèle articulé (le Dude), le faire suivre le tank, avec changement de l'orientation: https://youtu.be/3XT6Bl5UpeM 

 Séance 3

• Slides du cours (de 1 à XXX)
   
• Github repository du cours que l'on utilisera dans toutes les séances
  
  
• Vidéos du cours (8h30-12h30) :