Welcome to the guild!
Guilde Front-End - Mars 2024
Sommaire
Tour de table veille
Zod
COPILOT in VSCode
3D in modern browsers - Focus React Three Fiber
Tour de table
What's up?
What's hot?
My name is ...
We're hiring!
3d dans des navigateurs modernes - historique -
- Focus sur react-three-fiber -
Aperçu des moteurs 3D JS
A (not so) long time ago...
In a galaxy not so far away...
Flash and ADOBE empire ruled the world :O
LARGEMENT Suffisant pour la 2D
Propulsé par AS3
Suite Adobe
2010. AD
FLASH REALLY DID THE JOB
NOMBREUX API: HAXE, etc
Pas open source
3d compliquée
Nécessite un plugin
MAIS...
ET POURTANT... DU POTENTIEL COTÉ HTML/CSS/JS
Créé en 2002
PHP JAVASCRIPT CSS
PAS D'ANIMATION
EXEMPLE
Here comes a new challenger!
STANDARDS W3C
Multi-platform
=> DESKTOP & MOBILE
<canvas />
<video />
<audio />
RéPOND AUX MANQUES COMBLÉS PAR FLASH
request Animation Frame for Smart Animating
Canvas
API simplifiée pour dessiner en 2d
Canvas
Mais aussi pour la 3d et WEBGL
BEAUCOUP MOINS ACCESSIBLE
WebGL PAR Khronos group
Quels vrais bénéfices?
Accélération matérielle
SYSTème de shader
PREMIERS PAS...
Mr Doob
Three.js
SDK 3d permettant simplement de:
Gérer des formes primitives
Lire différents formats d'assets
Appliquer des textures complexes
Utiliser Un Moteur physique
Animer des caméras
Animer des lumières
Mr Doob
Three.js
Mais... pas de UI dédié à l'instar de nombreux outils
Par contre il est possible de l'utiliser depuis React :O
React-three-fiber is a React renderer for three.js.
Explication par exemples
1/2
Explication par exemples
2/2
https://codesandbox.io/p/sandbox/frosted-glass-imn42?file=%2Fsrc%2FApp.js%3A20%2C1
Explication par exemples
1/2
Explication par exemples
2/2
Explication par exemples
1/2
Explication par exemples
2/2
https://codesandbox.io/p/sandbox/lulaby-city-gkfhr?file=%2Fsrc%2Findex.js
Explication par exemples
https://codesandbox.io/p/sandbox/lusion-connectors-xy8c8z?file=%2Fsrc%2Findex.js%3A6%2C1
Explication par exemples
https://codesandbox.io/p/sandbox/vigilant-cohen-bst0cy?file=%2Fsrc%2Findex.js
https://nvk9pf.csb.app/
https://codesandbox.io/p/sandbox/lusion-connectors-xy8c8z
https://codesandbox.io/p/sandbox/volumetric-light-godray-yggpw5?file=%2Fsrc%2Findex.js
Exemples avancés
https://docs.pmnd.rs/react-three-fiber/getting-started/examples
That's all folks
Copy of Guilde janvier
By trambz
