Image :
Edward Hopper
Ce code configure une scène en 3D en utilisant Three.js, en intégrant des objets tels que le ciel, le paysage, un bateau et un phare, tout en ajoutant des effets de lumière, de l'eau animée et des contrôles de la caméra. Voici une explication détaillée :
Les modules Three.js nécessaires sont importés, y compris ceux pour le chargement d'objets, les contrôles de la caméra, l'interface utilisateur graphique (GUI), et les objets spéciaux comme le ciel et l'eau. Une scène, une caméra, et un renderer sont créés. Le renderer est configuré pour gérer les ombres et est ajouté au document HTML.
OrbitControls permet de contrôler la caméra avec la souris, ajoutant des effets d'amortissement pour des mouvements plus fluides.
Un objet Sky est ajouté à la scène pour simuler le ciel. Un contrôleur GUI permet d'ajuster les paramètres du ciel en temps réel, tels que la turbidité, Rayleigh, et les coefficients Mie, affectant la qualité et la direction de la lumière solaire.
Une géométrie de plan est créée pour représenter le sol, avec une texture de sable appliquée. Le plan est configuré pour recevoir des ombres.
Un bateau et un phare sont chargés à partir de fichiers .obj et .mtl en utilisant OBJLoader et MTLLoader. Les objets sont positionnés et ajoutés à la scène.
Un objet Water est créé à partir d'une géométrie de plan, avec une texture animée pour simuler l'eau. L'eau est configurée pour réagir à la direction de la lumière solaire et est ajoutée à la scène.
La fonction animate est une boucle d'animation qui met à jour continuellement la scène, en particulier l'animation de l'eau et les contrôles de la caméra. La fonction init initialise la scène en appelant les fonctions de création des différents éléments et en démarrant la boucle d'animation.