Formations › Langage › JavaScript › Formation ThreeJS avec WebGL

Formation ThreeJS avec WebGL

Niveau confirmé

Catégorie Essential

Prix	3250€ ^HT / personne
5 jours (35 heures)

Paris | Classe Virtuelle

lun 12

ven 16

Mai

lun 7

ven 11

Juillet

lun 1

ven 5

Septembre

lun 27

ven 31

Octobre

lun 5

ven 9

Janvier

 Dernières places  Virtuelle uniquement

Labs : Infrastructure DaaS avec Chrome



Cafés et déjeuners offerts en interentreprises



En intra-entreprise pour former votre équipe

Aide au financement 4000€ Bonus Atlas CPF

Nouveauté Programme fidélité : 5% cumulé

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

Télécharger le plan du cours

Download the course outline

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

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