Docs Three.js

Des docs courtes, dans l’ordre de l’atelier : chacune montre une démo qui tourne, son code complet à copier, puis l’explication pas à pas.

1. Première scène

   Créer le projet avec Vite, poser une scène, une caméra et un rendu, puis faire tourner un cube qui suit la taille de la fenêtre.

   Démo en direct et code

2. Suivre la souris

   Transformer la position du pointeur en coordonnées de -1 à 1, puis s’en servir pour déplacer un objet dans la scène.

   Démo en direct et code

3. Lumières, ombres et réglages

   Éclairer un matériau réaliste, projeter des ombres, tourner autour de la scène avec OrbitControls et régler les valeurs en direct avec lil-gui.

   Démo en direct et code

4. Scroll et survol

   Faire descendre la caméra au rythme du scroll de la page, puis détecter l’objet sous le pointeur avec un raycaster pour le faire grossir.

   Démo en direct et code

5. Relier plusieurs écrans

   Faire discuter des téléphones et un grand écran en temps réel avec un serveur WebSocket en Node.js. Code seulement : il faut lancer le serveur chez toi.

   Code à lancer chez toi

6. Enregistrer une voix en MP3

   Enregistrer le micro dans le navigateur, envoyer l’enregistrement à ton serveur Node.js, le convertir en MP3 avec ffmpeg et le rejouer depuis une adresse servie par ce serveur. Code seulement.

   Code à lancer chez toi