Three.js

Par jfayad, 24 mars, 2025

Bienvenue dans notre dernier blog de la série ! Nous allons conclure en apprenant à animer des objets dans Three.js. L'animation rend tes scènes interactives et dynamiques, permettant d'ajouter des mouvements fluides et captivants à tes objets.

Étiquettes

Par jfayad, 13 mars, 2025

Bienvenue dans la sixiéme semaine de notre blogue sur Three.js! Avant de plonger dans l'ajout des ombres dynamiques, commençons par un petit rappel sur la manière de démarrer un projet Three.js et de créer une scène vide. Si tu nous rejoins pour la première fois ou si tu as besoin d'un rappel, voici comment initialiser un projet et une scène simple :

Étiquettes

Par jfayad, 1 mars, 2025

Bienvenue pour la cinquième semaine de notre série dédiée à Three.js ! La semaine passée, nous avons appris comment appliquer des textures basiques sur des objets en 3D. Cette semaine, nous allons approfondir notre exploration en découvrant les textures avancées comme les bump maps et normal maps. Ces techniques permettent d'ajouter des détails et du relief à un objet sans élever sa complexité géométrique.

Étiquettes

Par jfayad, 20 février, 2025

Bienvenue dans la quatrième semaine de notre série sur Three.js ! La semaine dernière, nous avons vu comment ajouter des lumières pour améliorer le réalisme de ta scène 3D. Cette semaine, nous allons explorer une autre technique clé pour rendre tes objets encore plus intéressants : l'ajout de textures.

Étiquettes

Par jfayad, 18 février, 2025

Bienvenue dans la troisième semaine de notre série sur Three.js ! La semaine dernière, tu as appris à créer un cube tournant, et j’espère que tu as pu t’amuser à personnaliser sa forme ou sa couleur. Cette semaine, nous allons rendre ta scène plus réaliste en ajoutant des lumières.

Étiquettes

Par jfayad, 8 février, 2025

Après avoir découvert Three.js dans notre premier blog d'introduction, passons à la pratique ! Aujourd'hui, tu vas apprendre à créer un projet simple avec un cube tournant en utilisant Three.js. Ne t'inquiète pas, c'est plus simple que cela n'y paraît, et je vais te guider à travers chaque étape.

Étape 1 : Créer les fichiers

Dans un nouveau dossier, crée deux fichiers :

Étiquettes

Par agascongrillis, 20 février, 2024

Donc pourquoi utiliser Three.js et pas juste WebGL? Quelles sont les différences entre les deux?

 

Comparons, par exemple, le code nécessaire pour générer un cube 3D en utilisant chaque technologie, fourni par la documentation de chacun.

 

Avec Three.js

Pour ajouter un objet 3D, il faut au minimum

  • de l'information sur la géométrie de l'objet

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); //Longueur, Hauteur, Profondeur

Étiquettes

Par agascongrillis, 3 février, 2024

Bonjour! Je m'appelle Alexandros et j'étudie avec vous en programmation. Mon intérêt en jeux vidéo combiné avec mon intérêt général en informatique est ce qui m'a poussé à apprendre la programmation.

L'année passée, pendant une pause, j'ai découvert par pur hasard un site web qui m'a vraiment choqué: https://slowroads.io/

Étiquettes