Tools: HTML5/CSS3/JavaScript, WebGL, Three.js, Jquery.js, Tween.js, Cinema 4D
Sky Lantern the Wish is a 3D Interactive Web application. Our idea comes from the traditional Chinese culture of making "Kongming lantern" where people hand-writing their wishes on a small hot air balloon that made of paper and set it up to the sky at night. In Asia and elsewhere around the world, sky lanterns have been traditionally made for centuries, to be launched for play or as part of long-established festivities. 
The Sky Lantern represents the holding of beautiful wishes; we want to inherit the beautiful culture and make it into the digital world that people can assess and making sky lanterns, wishes on the internet. 
When people go inside our application, they will see an ocean and a sky full of lanterns. After clicking the "make a wish" button, users can type their wishes that will show on the "lantern", then they can release it up to the "sky" and restore it on the "sky". By moving the mouse and pressing the up, down, left, right keys, the user will be able to change their views and "fly" into the "sky", to see other's wishes as well.

Our user flow is: 
1. open the website and see the opening lines
2. click the make a wish button and type some wishes to the lantern
3. press the return(enter) key for releasing the lantern to the lanterns sky
4. move the mouse and press the up, down, left, right keys to change the view and "fly" to the sky to see other's wishes
5. make another wish   - then back to 2,3,4 flow

Here will be the full experience for having and releasing a wish lantern to the sky.​​​​​​​
What We Made:
Three.js
Using Three.js to build our world, where users have controls over their position and perspectives. (First person control)
A waving surface of an ocean/sea/whatever (GeoPlane)
3D models with user inputs as texture
Animation and transition of objects and camera (Tween.js)
DOM
Layouts of the webpage with CSS, tried to use ‘rem’ as the unit to make the site responsive on mobile devices.
Simple animations of the displayed page with CSS transition and Javascript
Having a canvas as the texture, to map it to the right position, I have to use ‘text wrap’ to restrain it
The transition between elements (pages)
 3D
Figured out how a model is being rendered in a computer and the relationship between all the elements ( after years, finally )
Draw the UV maps and the textures as part of the material.
Modify the 3D model we purchased online, to get the render result faster and better in WebGL
 Others
We try to have some fancy ‘poem-like’  lines about wishes, as we both are not native speakers, we use AI generated contents in the beginning…



I was in charge of making the all the 3D animations by code, it a complicated process to deal with cameras and controllers settings, and I used Tween.js as well. A big challenge for me is to control both the user input with the key board and the view changes by mouse moving and keys press, also for the reset camera part. Because I am using the first person control function to control the view of our web evrionment, it has the conflict between the control object and the mouse's position. So I changed the library of it a little bit for my reset camera and mouse position's purpose. below is the changes:

Xinyue built the fundamental site interactions with Javascript, HTML, and CSS, and figured out the part where user inputs come to the lantern texture in Three.js.
Other Resources & libraries: Tween.js; Hover.css; Poem Generator (https://www.poem-generator.org.uk/quick/)

original library code

change for reset camera function

3D molding and texture applying

texture testing

Back to Top