おはようございます。
一ヶ月前THREE.JSを利用してFPSゲームを作ってみました。
前「THREE.JS を利用してFPSゲームを作ってみよう１」のソースをベースにして作ってみました。
いろんなスクリプトが追加されましたので全体的の流れを説明しつつファイルをアップロードします。
ご参考になるといいと思います。

「ゲームのアップデートは有ります。もっといい企画を立ってまたブログします。」

:: GAME INFO ::
TITLE : SHIFTBIRD
PROGRAM SUPPORT : kaminary
CHARACTER DESIGN : Mucho

:: HOW TO GAME ::
90秒以内にアイテムを使って鳥を撃って落とすゲームです。

:: 操作 ::
ITEM
ITEM1 = KEY [1] 連発銃
ITEM2 = KEY [2] ショットガン
ITEM3 = KEY [3] 砂時計

MOVE
上 = KEY [W]
下 = KEY [S]
左 = KEY [A]
右 = KEY [D]

ATTACK
SHOT = MOUSE [LEFT BUTTON]

//全体的な流れです。

init() 
     THREE.JS基本設定　
     Camera setting
     Render setting

     //ターゲット表示
     CrossHair setting 

contentLoad()
　　 //回りの風景
     skybox img load
　　 bullet modeling json&teture load
      
setup()
     controller setup
     skybox setup
     //キャラクター生成
     chr setup [BoxMan class (MD2CharacterComplex.js) ]
     chr camera setup

addEvent()
     mouse Event
     keyboard Event

gamestart()
     game time setup
     game option setup
     game item setup

     //鳥作り　ShiftBird.jsからclass　import
     bird make [shifrBird class (ShiftBird.js) ]


animation()
     gameStatus check
     camera position check
     controller update

     //character 移動とアニメーションアップデート
     chr update

　 　//たまと鳥のヒットテスト　
     bullets & birds hit check

source : ShiftBird.zip

SHIFTBIRD

おはようございます。
最近Three.jsの勉強をしています。
それでThree.jsを使ってFPSゲームを作ってみようかと思いまして基本的なSourceを作ってみました。

現在FPS_base.html と FPS_Control.htmlがあります。
FPS_baseは名前とおりThree.jsのrendering構成Baseで
FPS_Controlはmouseやkeyboardに反応できるeventを追加してcameraを一人称視点で変えてみました。

FPS_base

FPS_Control

Three_example.zip

sourceはこんな感じです。FPS_BASEの構成の基本にして書きました。

(function()
{
	var sw,sh,
		scene, 
		camera,fov,aspect,near,far, 
		renderer, 
		light,
		stats;
		
	var chScene, chCamera;			
	function init()
	{
		/* WINDOW SIZE */ 
		sw = WindowSize.width();
		sh = WindowSize.height();
		
		/* SCENE SETTING*/ 
		scene 	= new THREE.Scene();
		
		/* RENDERER SETTING */ 
		renderer = new THREE.WebGLRenderer({antialias : true});
		renderer.setSize(sw,sh);
		document.body.appendChild(renderer.domElement);
		
		/* CAMERA SETTING */ 
		fov 	= 45;
		aspect 	= sw/sh;
		near	= 0.1;
		far		= 10000;
		camera 	= new THREE.PerspectiveCamera(fov,aspect,near,far);
		camera.position.set(0,500,1000);
		scene.add(camera);
		
		/* LIGHT SETTING */ 
		light = new THREE.DirectionalLight( 0xffffff, 1.5 );
		light.position.set( 200, 450, 500 );
		light.shadowMapWidth = 1024;
		light.shadowMapHeight = 1024;
		light.shadowMapDarkness = 0.95;
		scene.add(light);
		
		/* STATS */
		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		stats.domElement.style.zIndex = 100;
		document.body.appendChild( stats.domElement );
		
		
		/* CROSSHAIR SECEN */
		renderer.autoClear = false;
		chScene 	= new THREE.Scene();
		chCamera 	= new THREE.PerspectiveCamera(fov,aspect,near,far);
		chCamera.position.set(0,0,0);
		chScene.add(chCamera);
		
		
		/* SETUP & RENDERING LOOP */
		setup();
		addEvent();
		requestAnimationFrame(rendering);
	}
	
	// ------------------------------------------------------------------
	// RENDERING
	// ------------------------------------------------------------------
	
	function rendering()
	{
		delta = clock.getDelta();
		
		animation();
		
		renderer.setDepthTest(true);
		renderer.clear();
		renderer.render(scene, camera);
		renderer.setDepthTest(false);
		renderer.render(chScene, chCamera);
		
		
		stats.update();
		requestAnimationFrame(rendering);
	}
	
	var lookTarget  = new THREE.Vector3(0,0,0);
	function animation()
	{
		camera.position = chr.camera.position;
		camera.rotation = chr.camera.rotation;
		//camera.lookAt(lookTarget);
		controler.update(delta);
		chr.update();
	}
	
	// ------------------------------------------------------------------
	// SETUP & ADD EVENT
	// ------------------------------------------------------------------
	var clock,delta,
		ground,chr,tower,
		controler,
		crossHair;
	function setup()
	{
		clock = new THREE.Clock();
		
		// object
		ground 		= new Ground("asset/img/grasslight-big.jpg")
		chr 		= new Cube(new THREE.Vector3(0,50,200),100,100,100,0xff0000);
		tower		= new Cube(new THREE.Vector3(0,500,0),100,1000,100,0x0000ff);
		chr.cameraOn();
		
		// controler
		controler						= new FPC_Controler(chr.camera, renderer.domElement);
		controler.movementSpeed 		= 400;
		controler.lookSpeed 			= .2;
		controler.lookVertical			= true;
		controler.constrainVertical 	= true;
		controler.verticalMin			= (30 * Math.PI) / 180;	
		controler.verticalMax 			= (100 * Math.PI) / 180;
		
		// CrossHair
		crossHair	= new CrossHair();
				
		scene.add(ground.root);
		scene.add(chr.root);
		scene.add(tower.root);
	}
	
	function addEvent()
	{
		document.addEventListener("keydown", onKeyDown, false);
		renderer.domElement.addEventListener("mousedown", onMouseDown, false);	
	}
	
	// ------------------------------------------------------------------
	// EVENT HANDLER
	// ------------------------------------------------------------------
	
	function onKeyDown(e){
		switch(e.keyCode){
			case 32: /*space*/ break;
			case 49: /*1*/ crossHair.change(0); break;
			case 50: /*2*/ crossHair.change(1); break;
			case 51: /*3*/ break;
			case 52: /*4*/ break;
			case 53: /*5*/ break;
		};
	}
	
	function onMouseDown(e){
		switch ( e.button ) {
			case 0: console.log("attack"); break;
		}
	}
	
	// ------------------------------------------------------------------
	// OBJECT CLASS
	// ------------------------------------------------------------------
	
	//GROUND CLASS
	function Ground(imgURL)
	{
		this.root = new THREE.Object3D();
		this.gt = THREE.ImageUtils.loadTexture( imgURL );
		this.gg = new THREE.PlaneGeometry( 3000, 3000 );
		this.gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: this.gt, perPixel: true } );
		
		this.mesh						= new THREE.Mesh( this.gg, this.gm );
		this.mesh.material.map.wrapS 	= this.mesh.material.map.wrapT = THREE.RepeatWrapping;
		this.mesh.rotationAutoUpdate 	= true;
		this.mesh.castShadow 			= false;
		this.mesh.material.map.repeat.set( 100, 100 );
		
		this.root.add(this.mesh);
	}
	Ground.prototype.constructor 	= Ground;
	
	//CUBE CLASS			
	function Cube(position,width,height,depth,color,imgURL)
	{
		this.geo 	= new THREE.CubeGeometry(width,height,depth);
		this.mat 	= new THREE.MeshLambertMaterial({color:color});//new THREE.MeshBasicMaterial();//
		this.mesh 	= new THREE.Mesh(this.geo, this.mat);
		this.mesh.position.set(0,0,0);
		
		this.root	= new THREE.Object3D();
		this.root.add(this.mesh);
		this.root.position.set(position.x, position.y, position.z);
	}
	Cube.prototype.update = function(){
		if(this.camera){
			if(this.camera.position.y < 50 || this.camera.position.y > 50) this.camera.position.y = 50;
			
			this.root.position = this.camera.position;
			this.root.rotation = this.camera.rotation;
		}
	}
	Cube.prototype.cameraOn = function(){
		if(!this.camera){
			this.camera = new THREE.PerspectiveCamera(45,sw/sh,.1,10000);
			this.camera.position = this.root.position;
			this.root.add(this.camera);
			console.log(this.camera)
		}	
	}
	Cube.prototype.cameraOff = function(){
		if(this.camera){
			this.root.remove(this.camera);
			this.camera = null;
		}
	}
	Cube.prototype.constructor 	= Cube;
	
	//CROSSHAIR CLASS
	function CrossHair()
	{
		this.CrossHairID 		= 0;
		this.CrossHairMaps 		= ["asset/img/crosshair1.png","asset/img/crosshair2.png"];
		this.CrossHairMap 		= THREE.ImageUtils.loadTexture( this.CrossHairMaps[this.CrossHairID]);
		
		this.CrossHair 						= new THREE.Sprite({ useScreenCoordinates: false});
		this.CrossHair.alignment 			= THREE.SpriteAlignment.center;
		this.CrossHair.useScreenCoordinates = false;
		this.CrossHair.position.z = -1000;
		
		// console.log(chScene);
		this.CrossHair.map = this.CrossHairMap;
		chScene.add(this.CrossHair);
	}
	
	CrossHair.prototype.change = function(id){
		if(this.CrossHairID == id || this.CrossHairID > this.CrossHairMaps.length - 1) return;
		this.CrossHairID 	= id;
		this.CrossHairMap 	= THREE.ImageUtils.loadTexture( this.CrossHairMaps[this.CrossHairID]);
		this.CrossHair.map = this.CrossHairMap;
		
	}
	CrossHair.prototype.constructor = CrossHair;
	
	
	
	window.addEventListener("load",init)
}).call(this);

ここで問題点がいくつかありましたけどその中で
下のsourceを見ると FPC_Controler(...)のClassは元々Three.jsのFirstPersonControlsというclassでした。
FirstPersonControlsClassはkeyboardやmouseのeventが定義されて上書きができなかったところで別のClassにして修正をしました。

controler = new FPC_Controler(chr.camera, renderer.domElement);

次の公開は来週になる予定です。
次は鳥が飛んでいて鳥を落とすまでと思います。

よろしくお願いします。

はじめまして。きょんたろです。
今回はhtml5のcanvasをすぐ使うようにTempleteを作ってみました。
まだいろんな技能はないですけどどんどんupdateする予定です。
そして追加したらいいな～ものがあれば教えてくださったら追加しておきます。

１．cssはdevjamのtempleteを使っています。
２．utils.jsにはいろいろutilのjsがicludeされています。
３．canvasUtils.jsにはcanvasの関するjsがicludeされています。
４．canvasBase.jsは基本になるjsです。
CanvasBasic_ver1.zip

 
/**
 * @author shiftBrain DevJam
 * canvas groung ver1 
 * 2012.02.23
 */

//--------------------------------------------------------------------------------
// window loaded
//--------------------------------------------------------------------------------
function canvasStart(canvasID)
{
   if(canvasSupport){
       canvasApp(canvasID);
   }
}

//--------------------------------------------------------------------------------
// canvas support ture ? false
//--------------------------------------------------------------------------------
function canvasSupport(){
    return Modernizr.canvas
}

function canvasApp(canvasID)
{
    // ---------------------------------------------------------------------------
    // Common Variables ----------------------------------------------------------

    var sw;     // window Width
    var sh;     // window height 

    var cvs;    // canvas
    var ctx;    // canvas context
    var resize  = false; // canvas resize function true / false
    var frame   = new FrameRateApp(10); //bin/common/js/utils/frameRateApp.js
    var timer   = new Timer(); //bin/common/js/utils/timerApp.js

    //Debugger.log(frame.getInteval());
    //Debugger.log(frame.getFRAME());

    cvs     = document.getElementById(canvasID);
    ctx     = cvs.getContext("2d");
    resize  = false;
    canavsResize();

    // ---------------------------------------------------------------------------
    // canvas resize -------------------------------------------------------------
    // ## HOW TO USE ##
    // canavsResize()       --> window Size Setting
    // canavsResize(10,10)  --> width=10 height=10 customer size setting
    // ---------------------------------------------------------------------------

    window.addEventListener("resize",canavsResize, false);
    function canavsResize(w,h){
        sw = WindowSize.width();  //bin/common/js/utils/getSize.js
        sh = WindowSize.height();       
        Debugger.log("resizeEvent="+sw+"x"+sh);
        if(!w || !h){
            if(cvs && resize){
                cvs.width  = sw;
                cvs.height = sh;
            }
        }else{
            if(cvs){
                cvs.width  = w;
                cvs.height = h;
            }
        }
        Debugger.log("canvasSize="+cvs.width+"x"+cvs.height);
    }

// ***************************************************************************
// Code main ***********************************************************
    // ここから　変数と関数は　気に入るように変更してもいいです。

    function setup(){

    }

    function main(){
        update();
        draw();
    }

    function update()
    {

    }

    function draw()
    {

    }

// ---------------------------------------------------------------------------
// rendering Setting ---------------------------------------------------------
    setup();
    frame.setFRAME(30);    
    timer.start(main,frame.getInteval());
//setTimeout(timer.stop,3000)
}