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