Drift Bottle
Make a wish, tell a secret or just write a message to someone you don’t know. Then put it into a bottle and throw it into the ocean. You can also pick up a drift bottle and read someone’s message. This a project created with WebGL. I am experimenting what 3D human interface interface visual design and interaction design could do to enhance user experience.
2017.4
App Development, Interaction Design, Visual Design, Database
WebGL, Three.js, Html/CSS/Javascript
I. Maya Modeling and Animation
I created the low poly iceberg, ocean and bottle models in Maya. Then I animated the ocean and export JSON file so that it can be used in Three.js.
Ocean Animation in Maya
Here is the test video of creating low poly ocean in Maya.
Export Model to Three.js
After the modeling and animation, I exported JSON files to three.js and adjusted the materials, lighting and rendering to have this low poly feeling.
II. Coding with Three.js
Shader for the sky.
Camera, scene, light, model, renderer
Use Raycaster so that the position of "click" and "touch" event can be passed on to 3D objects in three.js.
III. CSS Animation and Shake Interaction
Here are some CSS animation code. I also use shake.js library to detect the shake event on phone. Once it is triggered, the animation of bottle will be played.
