Role/

Project Initiator, Programmer

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.

Show More

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.

© 2020 Hazel