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.



App DevelopmentInteraction 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

Screen Shot 2017-05-02 at 12.55.49 PM.png

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.


IV. Connect to MongoDB with express.js and socket.io


V. Publish to App Store