JANUARY 2021
Marshmallow Roast
A beautiful forest campsite scene set very early in the morning with our camper, Mohammad. He is roasting marshmallows, but wants them to be just right! Change Mohammad’s marshmallow before it burns or help him remove it if it’s too late! I coded this interactive scene along with 3 other developers using the Three.js library wrapped in a React App. My first ever computer graphics project!
Our Pitch
We decided to set our scene in a beautiful forest early in the morning (early enough that the stars still show). Mohammad is really craving a lot of marshmallows, but he needs them to be in a perfect golden brown state. He is sitting on a log in front of a fire surrounded by mountains, trees, and stars. There are 3 objects that are autonomously animated: the fire, the marshmallow (burning) and the stars moving. We have also given the user 2 things to do: they can explore the scene by moving/panning the camera and they can start burning a new marshmallow by double clicking on the screen. We recommend that the user gives Mohammad a new marshmallow once he notices (when an exclamation mark appears) that the marshmallow is starting to burn.
My Role:
I worked on the tent, mountain, mountain range, stump, lake, lantern, hydro, and loading objects. Most of my objects utilize the grouping of multiple geometries and integrate textures. To allow the textures time to load, I included a "loading screen" that disables user camera controls temporarily and fades out after a few seconds to reveal our scene. In addition, I created the “skybox” in our main demo-universe.js file that makes the scene appear as though it has a 360° view of the sky and staged all of our objects to make the composition feel more complete.
Features:
Double (left) click will reset the marshmallow’s color to white
Marshmallow lerps to golden brown then lerps to black after it reaches golden brown
Exclamation mark appears when marshmallow starts to burn (to black)
Fire animates to “burn” the marshmallow
Trees and stars placed randomly each initialization
360° view of sky (Skybox)
Camera Controls: Click and drag with left click to orbit. Click and drag with right click to pan. Scroll with scroll wheel to zoom in and out
Loading screen that fades out to reveal the scene