Introduction to WebGL - Javascript (Three.js)

3d rendering of a water surface

Scroll ↓

River view

The goal this project was to create a water surface and to showcase 3d skills. I chose to create a simple scene with a river flowing. The river itself is a simple plane with a watery texture animated. The hardest part was the reflection. it is made using a second camera situated under the ground looking right undet the main camera. was it sees is mapped to the texture to simulate the reflection.

Sunset

I decided to implement a day/night cycle. It moves the main light similar to how the sun would move. I also modify the skybox to simulate the sky change of coloration and then at night, leave place to a stary skybox also animated in fonction of the hour slider.

Gazebo

In order to populate the scene I used Maya 3D to create models of a bridge, a gazebo and basic terrain.