This project is an interactive 3D scene developed with Three.js and WebGL.
It represents a small natural environment where the user can plant seeds, grow flowers, observe animated grass and plants, switch between day and night, and activate a storm mode with rain and lightning.
The project was developed as part of an Interactive Graphics course at "La Sapienza" and focuses on procedural modeling, animation, shaders, and real-time interaction.
- Interactive 3D natural environment
- Seed placement and plant growth
- Procedural flowers, leaves and grass
- Day and night mode
- Fireflies during night mode
- Storm mode with rain, wind and lightning
- Wet ground and puddle effects
- Animated water droplets on plants
- Butterfly animation and butterfly camera
- User interaction with plants and environment
- JavaScript
- Three.js
- WebGL
- GLSL shaders
- Vite
- HTML
- CSS
The scene allows the user to interact with a small virtual ecosystem.
Seeds can be placed on the ground, and each seed grows into a plant through a gradual animation.
The plant is composed of a stem, leaves and an orchid-like flower.
The environment changes according to the selected mode.
Day mode: the scene is brighter and warmer, with the presence of a butterfly.
Night mode: the lighting becomes darker and fireflies appear, the butterfly is still present.
Storm mode: rain starts falling, the wind becomes stronger, butterfly disappears the ground becomes visually wet with puddles, and lightning strikes randomly.
The user can:
- plant seeds on the ground;
- choose the flower's color;
- watch plants grow over time and decide the velocity of growth;
- switch between day and night;
- activate and deactivate storm mode;
- interact with grass and leaves using the cursor;
- observe fireflies at night;
- switch to the butterfly view with a moving camera perspective.