Project Initiator, Programmer


We used to see world with our body size. What is the view of mini creatures, like a firefly?
In this app,
into a kitchen. With a dim spot light created by itself, it explores giant foods, cookwares, etc in the kitchen. Players control the firefly by tilting their phones.

Create Models in Maya

Maya Bonus Building 3D models in .3ds format. We install a plug-in called Tool so that 3ds Max files can be edited in Maya.

In addition, we find another plug-in called OBJexporter. This allows us to finally load the models in three.js. (Actually, we also tried Maya to Three.js exporter, but the .json file doesn’t work. Still trying to figuring out why.)




Load Models and Create Texture with Three.js

We find some texture image and use CrazyBump to generate normal map or bump map for the models, so that the models will look more realistic.

Load .obj file and attach the texture to it in three.js.

Use Cordova to Create a Mobile App
Import P5.js and Use Rotation Data of Phone


The interaction is that by rotating the phone, users can control the movement of the firefly. Currently, the easiest way for us to do that is to use rotationX and rotationY in P5 library.

Here is the function to map the rotation data to moving speed.

Follow Up


As we wrote in our proposal, this is an ongoing project. We got a lot of good feedback from our classmates. There will be more interaction adding between the firefly and objects in the kitchen. We are now doing research on Physi.js,  which can add physics simulation to the scene. Hopefully, this will be developed into a game which has more stories and scenes for this little firefly who accidentally runs into giant human world.

View All Projects by Hazel