Sélectionner une page
Formations Langage JavaScript Formation ThreeJS avec WebGL

Formation ThreeJS avec WebGL

Rated 0,0 out of 5
Formation Webgl avec Angular et Threejs
Prix 3250€ HT / personne
Durée 5 jours (35 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

Présentation

Angular est le framework typescript de référence permettant d’avoir des projets bien structurés et de bénéficier de l’ensemble de l’outillage (ngTools, Angular Cli) du framework. Il fait partie avec React des deux frameworks WEB issus des GAFAM et largement utilisé et maintenu par la communauté open source.

De son côté, Three JS est une bibliothèque JavaScript (existant aussi en typescript) qui permet de créer des scènes 3D dans un navigateur WEB. Cette librairie est très utilisée dans le monde du WebGL pour réaliser des sites web interactifs (Sketchfab, Orano Innovation), mais aussi pour des produits industriels (simulateur 3D en accès SAAS, navigation virtuelles dans des clones numériques de Bâtiment).

Dans cette formation, vous découvrirez comment créer un Sketchfab vous-même vous permettant de visualiser et naviguer dans une scène 3D. Vous apprendrez les fondamentaux de la 3D avec ThreeJS (graphe de scène, mesh, matériaux, vertices, facettes, matrices de caméra, cône de vision (view frustum). Ces fondamentaux vous seront utiles à de nombreuses librairies et SDK 3D dont Matterport pour créer, par exemple, des clones numériques.

Enfin, vous découvrirez un framework logiciel Open Source pour la CAO/CFAO, l’IAO et la modélisation 3D : OpenCascade. Nous ouvrirons sur deux exemples actuels et utilisés dans le Web d’Opencascade: Node-Occ (Recompilation en Natif Node) et OpencascadeJS (WebAssembly).

 

Objectifs

  • Découvrir les fonctionnalités de ThreeJS
  • Savoir développer une nouvelle application Web avec Angular et Three JS
  • Savoir concevoir une application Angular avec JavaScript et TypeScript 4.8
  • Savoir construire un graphe de scène incluant des objets, des matériaux et une caméra
  • Savoir définir les positions et rotations des éléments de la scène et les caractéristiques de la caméra
  • Savoir différencier les avantages/inconvénient d’un rendu de la scène dans le navigateur vs un rendu côté serveur et les cas d’usages

 

Public visé

  • Développeur Web
  • Lead Développeur
  • Architecte
  • Chef de projets

 

Pré-requis

Connaissance de JavaScript ou TypeScript, HTML5/CSS3, Angular

Programme de notre formation ThreeJS avec WebGL

 

Jour 1 – Introduction

  • WebGL and ThreeJS : son histoire
  • TypeScript : le typage du JavaScript
  • ECMAscript, DOM et BOM
  • Support des Canvas

 

Les bases du WebGL (Fondamentaux I)

  • Un Objet 3D et sa définition
  • La définition d’une scène
  • La mise à jour des coordonnées (position, taille, rotation)
  • Les différents types de caméras
  • Essai sur des exemples : modification online sur JSFiddle

 

Les bases de l’Angular

  • Intégrer Angular
    • Les composants, les modules, les services
  • Le property binding, l’event binding
  • Les forms
  • Les différents types de directives
  • Le routeur et la hiérarchie des routes (Exemple avec ui-router et lazy loading)
  • Essai sur des exemples : modification online sur JSFiddle

 

Jour 2 – Les bases du WebGL (Fondamentaux II)

  • Les maillages et les géométries
  • Les différents types de matériaux et d’illuminations
  • L’export de géométries ou de scènes
  • Les détections de collision
  • Essai sur des exemples : modification online sur JSFiddle

 

Jour 3 – Création d’un SKETCHFAB (Jour 1)

  • Préparation de la coquille d’application Angular qui héberge le canvas
  • Mise en place des interfaces (importer, exporter, changer de caméra, centrer la scène sur l’objet)
  • Binding du canvas avec la librairie ThreeJS
  • Écriture du chargement des différents éléments (caméra, vertices, faces, lumières, matériaux) dans la scène 3D

 

Jour 4 – Création d’un SKETCHFAB (Jour 2)

  • Écriture du loader d’objets 3D dans ThreeJS
  • Préparation de la scène
  • Binding des interfaces Angular avec les appels d’API dans ThreeJS
  • Essai et démonstration en groupe
  • Import et visualisation de différents modèles 3D

 

Jour 5 – Présentation d’OpenCascade

  • Ouverture sur deux différentes modélisations géométriques des solides (BREP, CSG) et sur les avantages différences de chacun
  • Présentation d’OpenCascade et de sa version OpenSource Node-Occ
  • Exemple de rendu côté serveur de CSG et des avantages
  • Comparaison avec une version WebAssembly d’OpenCascade

Pour aller plus loin

Formation Angular

Formation Ionic

Formation D3.js

Langues et Lieux disponibles

Langues

  • Français
  • Anglais / English

Lieux

  • France entière
    • Paris
    • Lille
    • Reims
    • Lyon
    • Toulouse
    • Bordeaux
    • Montpellier
    • Nice
    • Sophia Antipolis
    • Marseille
    • Aix-en-Provence
    • Nantes
    • Rennes
    • Strasbourg
    • Grenoble
    • Dijon
    • Tours
    • Saint-Étienne
    • Toulon
    • Angers
  • Belgique
    • Bruxelles
    • Liège
  • Suisse
    • Genève
    • Zurich
    • Lausanne
  • Luxembourg

Nos Formateurs Référents

Antony

Antony

Lead-dev fullstack avec un intérêt fort pour la stack Node et le TypeScript. Mes dernières applications développées récemment sont dans le domaine de la 3D, du calcul scientifique, et de l’IOT. J’accompagne mes clients du POC jusqu’au déploiement en production grâce aux pratiques DevOps.

Témoignages

⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !

Afficher tous les témoignages

⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !

Noter la formation

Prix 3250€ HT / personne
Durée 5 jours (35 heures)

Paris | Classe Virtuelle

Il ne reste que quelques places
Cafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Aide au Financement 4000€ de Bonus Atlas en CPF

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp