Explications techniques

J'ai commencé par créer la skybox en utilisant la classe THREE.CubeTextureLoader() dans le scene.background, cette classe permet de charger les images de la skybox dans un cube.
J'ai ensuite placé les lumières, j'ai utilisé 2 types de lumières :

• DirectionalLight : Une lumière que l'on peut placer où l'on veut, afin qu'elle éclaire dans une certaine direction.
• AmbientLight : Une lumière permettant d'éclairer la scène de façon uniforme.

Ensuite, j'ai créé le paysage :

• L'eau : Pour cela j'ai utilisé l'objet Water de Three js, qui permet de faire une belle eau rapidement. Pour modéliser les vagues, on utilise une normal map, qui est une image utilisée pour imiter du relief sur une texture. Une ligne a été rajoutée dans la fonction render pour créer une animation sur l'eau. Il y a également un efeft miroir sur cette eau.
• La plaine et le relief : Pour modéliser ces éléments de paysage, j'ai utilisé une heightmap, c'est une image permettant de créer des reliefs en fonction des nuances de blanc présentes sur l'image. Dans Three JS, les matériaux ont l'attribut "displacementMap" qui prend l'image de la heightMap. L'échelle du relief voulu peut ensuite être défini avec l'attribut "displacementScale".

La maison comporte également plusieurs éléments :

• Les murs sont faits avec une normal map et une texture de mur, ces deux éléments sont répétés pour correspondre à la taille du mur.
• Le toit est fait avec une normal map, une couleur qui est celle du toit de la peinture originale, et enfin une specular map. Une specular map est une image constituée de noir et de nuances de blanc permettant de déterminer la réflectivité d'un matériau en 3d.
• La cheminée en elle même est simplement un bloc, sur lequel est appliqué une texture répétées suffisamment de fois pour que cela fasse réaliste.
  La fumée est un sprite, c'est-à-dire que c'est une image 2d dans un monde en 3d. Celle-ci fait toujours face à la caméra. Un sprite peut-être ajouté très facilement dans Three JS à l'aide de l'objet Sprite.
• Les fenêtres sont un bloc, comportant un matériau utilisant une environment map. Une environment map permet de créer un effet miroir sur l'objet sur lequel elle est appliquée. Une environment map s'ajoute à l'aide de l'attribut "envMap" des matériaux. Il faut ensuite attribuer une valeur à l'attribut "reflectivity". Ici les fenêtres reflètent la Skybox.

Le phare, est un objet 3d importé, sur lequel j'ai appliqué une texture avec l'outil MTLLoader. En haut du phare se trouve un personnage réalisant une petite animation. Tous les 35 "pas", ce personnage tourne de -PI/3 sur lui-même et avance de nouveau de 35 pas etc... afin de marcher le long de la vigie du phare. Un bouton permet d'arrêter/continuer l'animation, un autre permet de régler la vitesse du personnage.

Les ombres ont été appliquées sur tous les objets du projet, au fur et à mesure que je les créaient.