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

Mid-term Project URL

 http://yoyomo111.github.io/shooter%20game/index.html (Links to an external site.)

References

A lot of demos of three.js

https://github.com/stemkoski/stemkoski.github.com/raw/master/Three.js/js/jquery-1.9.1.js
https://github.com/stemkoski/stemkoski.github.com/tree/master/Three.js

Make rain

https://aerotwist.com/tutorials/creating-particles-with-three-js/

Note: Due to the version issues, this line :particle = new THREE.Vertex(new THREE.Vector3(pX, pY, pZ)); Change to particle = new THREE.Vector3(pX, pY, pZ);
For this line, I directly add particle velocity to particle position.addSelf()does not work in my project.

particle.position.addSelf(
      particle.velocity);
  }

http://danni-three.blogspot.com/2013/09/threejs-particle-engine.html?showComment=1456265994236#c986744027506486296

Note: I have tried to apply this but failed, did not figure out the problem. But it is a useful resource.

Sky box

http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/

Note: The thing that useful to my project is in the comments:skyboxMesh.doubleSided = true;

Sky texture

http://www.3d66.com/tietu_1_348.html

Add audio

https://sites.google.com/site/threejstuts/home/sound

Free 3D models

http://tf3dm.com/3d-models/blender-gun
https://www.cgtrader.com/3d-models?keywords=abandoned

Load models to three js

http://blog.romanliutikov.com/post/58690562825/external-models-in-threejs

Note: I use ColladaLoader.js to load the .dae model which is more convenient. Because the ColladaLoader.js is from the original game project itself, it can avoid incompatible problems caused by versions. My three.js and JSONloader.js that I downloaded from other place version(not latest) do not match the model.json format version. It threw old format(It's actually too new, it's the latest).

https://quaintproject.wordpress.com/2014/01/25/exporting-from-blender-to-web-gl-using-collada-and-three-js-part-2/

Note: Use blender to export .dae. Pay attention to the settings in this link.

problems and solutions

https://github.com/mrdoob/three.js/issues/902

Note: transparent material.

http://webroxtar.com/2011/10/solution-jquery-click-event-gets-called-twice-fires-twice/

Note: Click once, run once. My problem is I put the click function inside the animation loop, when I click once, the lines inside it will keep on looping. This is also the reason why sometimes the toggle button does not work, click ones means keep on clicking thousand of times.

http://stackoverflow.com/questions/8733179/what-is-the-equivalent-of-javas-system-out-println-in-javascript

Note: Use to debug.

https://github.com/mrdoob/three.js/issues/1586

Note: Change texture in render loop:

 sphere.material.map = THREE.ImageUtils.loadTexture('texture0.png',{},function(){
           //add callback here if you want
        });

Update 2

What I have done:
1. Add a sky dome
2. Add fog effect
3. Add shadow
4. Change the bullet's texture

Things to do:
1. Add three more effects
2. Add a gun in front of the Camera
3. Add background music, sound effects
4. Load other models in the scene: grass, trees etc.

Update 1

I followed the first tutorial that I found on Youtube, and created a scene that has first person control and random meteorites flying in the space. Currently, I am reading the Game Development with Three.js and doing experiments on the technics it teaches.

http://yoyomo111.github.io/3js%20project/06-audio.html

Mid term project idea

Abstract:

I am going to create a basic first person shooting game with visual effects.
Functions that I design to realize:
1. Users are able to change the visual effects of the scene. For example, the scene will have effects like summer, winter, day, night etc.
2. There will be some objects for users to shoot, and the program will calculate the points.
3. There will be some enemies to hinder users from shooting the targets.
4. Sound effects
5. Lighting
The game functions are simple, because I am going to focus more on its visual effects.

3 text books:

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

3D Game Art f/x & Design
Author: Luke Ahearn
link:http://www.amazon.com/Game-Art-Design-Luke-Ahearn/dp/1588801004/ref=sr_1_1?ie=UTF8&qid=1454989482&sr=8-1&keywords=3D+game+art+%3A+f%2Fx+%26+design+%2F+Luke+Ahearn

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

Topics that I am interested in:
Chapter 2 Building a World
Chapter 3 Exploring and Interacting
Chapter 4 Adding Detail

3 video references:

I have found some tutorials of game design with three.js on youtube which I am interested in.
They introduce the basic concepts of three js and teaches you how to develop a game in a few lines of codes. By following the tutorials, you can well understand the basic logic of game design, which helps you develop more complex games in the future.

tutorial:

https://www.youtube.com/watch?v=PN0uwzgPe3c
https://www.youtube.com/watch?v=P2q5M50x5Uw

demo:
https://www.youtube.com/watch?v=mviNiZnASC4