Final Project

Progress

1. Load .dae models

2. Correct the mistakes in the models

3. Add collision and shadow on the model

4. Revise the height of the particle system

5. Add loading screen

Challenges

1. Fail to load a .dae model, cannot map them with a texture.
The export setting of the .dae model in blender was wrong. I found the answer here. the right setting should be:

2. Some faces are missing after exporting. Miss all the inside faces of the walls. See the image below:

Because the  normals of those faces are inverse. Open the edit mode in blender, "Control + Tab" Select Mode pick "faces",  press "N" to show the right menus, find normals, 

 

then you are able to see the normal lines.

Then select the faces, and flip the normals. Left hand side menu: Shading / UV -> Normals -> Flip Direction

The model will be like this after exporting:

3. Texture issues

UV map mistakes:

To fix it, move the faces back into the texture image.

These mistakes on the model are hard to notice in the blender until you load it into three.js, because it looks just fine inside the blender.


Text books

Game Development with Three.js
Author: Sukin, Isaac
link: http://site.ebrary.com/lib/univflorida/detail.action?docID=10789470

beginning Blender: Open Source 3D Modeling, Animation, and Game Design
Author: Lance Flavell
link:http://link.springer.com/book/10.1007%2F978-1-4302-3127-1

Learning Three.js – the JavaScript 3D Library for WebGL

Author: Dirksen, Jos

And a lot of online resources see here

P.s The project is built based on Sukin, Isaac 's demo.

Software

firefox, Sublime, Blender, Photoshop